变换比例（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中不起作用

回答

相关问题