變換比例（1）在Microsoft Edge中不起作用

在Microsoft Edge中執行簡單變換時出現問題：scale()。我創建了一個simple test case，它應該通過縮放scaleX()屬性來顯示懸停時的子菜單。這應該適用於任何瀏覽器。只要我喜歡縮放的值爲1，它就會失敗，但如果它是1.0001或0.999999，則它會失敗。這也不符合scale()和scale3d()。變換比例（1）在Microsoft Edge中不起作用

* { 
 
    font: 18px/1.5 sans-serif; 
 
} 
 
li { 
 
    padding: 0.2em 1.4em 
 
} 
 
.root > li { 
 
    display: inline-block; 
 
    background: #adc; 
 
} 
 
li > ul { 
 
    position: absolute; 
 
    background: #cde; 
 
    transform: scaleY(0); 
 
    border: 1px solid green; 
 
    height: 200px 
 
} 
 

 
li.one:hover > ul { 
 
    transform: scaleY(1.0001) ; 
 
} 
 

 

 
li.two:hover > ul { 
 
    transform: scaleY(1.0) ; 
 
} 
 

 
li.three:hover > ul { 
 
    transform: none ; 
 
} 
 

 

 
.content { 
 
    background: #fed; 
 
    min-height: 700px; 
 
}

<ul class='root'> 
 
    <li class='one'>hover me, it works 
 
    <ul> 
 
     <li>ding</li> 
 
     <li>dong</li> 
 
    </ul> 
 
    </li> 
 
    <li class='two'>me not, in IE Edge 
 
    <ul> 
 
     <li>ding</li> 
 
     <li>dong</li> 
 
    </ul> 
 
    </li> 
 
    <li class='three'>got it! 
 
    <ul> 
 
     <li><code>transform: none</code></li> 
 
     <li>does the trick!</li> 
 
     <li>so stupid!</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="content"> 
 
<h1>Huhuuuh,</h1> 
 
    <p>Obviously IE Edge (current Version on a Surface Pro) has a problem with hiding and showing elements via a scale transforms to factor 1. As long as its not Integer(1) like 0.9999 or 1.0001, it works. 
 
    </p> 
 
    <p>Just try out here and change the values to get sure.</p> 
 
<p> 
 
My IE Version: 
 
    <br /> 
 
Microsoft Edge 25.10568.0.0 
 
<br /> 
 
Microsoft EdgeHTML 13.10568.0.0 
 
    </p> 
 
</div>

來源

2016-08-01 erotte

最好的辦法是微軟封邊，不封邊IE，順便說一句。 IE是完全不同的瀏覽器。 – TylerH

我在互操作性的基礎上提交了[針對Microsoft Edge的錯誤]（https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8347513/）。 – Sampson

根據MSDN：

功能scale(1, 1)離開元素不變。

因此，似乎在這種情況下，IE和EDGE的行爲就像不應該做任何更改，而不是將元素縮放到其原始大小。

如果是沒有其他的變換，它可能重置應用轉型：如果您設置了原始的寬度和高度，然後transform: scale(1, 1);將工作

transform: none;

來源

2016-08-01 14:12:28

...但它已被縮放到'scale（0,0）'之前。那麼，是否有一個選項將元素重置爲其原始比例？ – erotte

@erotte我更新了我的答案。請看看它。 –

是的，我也剛剛得到它並在示例中修復它。如此簡單和愚蠢，不能相信... 非常感謝！ – erotte

，但除此之外，你將無法重置像你這樣的轉變。從給定的w/h進行縮放變換，在縮放到0,0的情況下，它將是0和0，這就是問題所在。因此，設置的原始寬度和高度是去

div { 
 
    margin:120px; 
 
    display:inline-block; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
    -ms-transform: scale(0,0); /* IE 9 */ 
 
    -webkit-transform: scale(0,0); /* Safari */ 
 
    transform: scale(0,0); /* Standard syntax */ 
 
} 
 
#wrapper{transform:scale(1,1);} 
 
body{overflow-x:hidden;}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
<div id="wrapper"> 
 
<p>This div uses scale (1, 1) and it works because a w/h have been set in the css</p> 
 

 
<div> 
 
This div element is scaled to 0 
 
</div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-08-01 14:31:29

順便說一句，在Opera Mini上不支持縮放，並且在FF上也有問題，http://caniuse.com/#search=transform –

變換比例（1）在Microsoft Edge中不起作用

回答

相關問題