transform scale(1) 在 Microsoft Edge 中不起作用

Question

我在 Microsoft Edge 中执行简单转换时遇到问题：scale()。我创建了一个 simple test case，它应该通过缩放 scaleX() 属性在悬停时显示子菜单。这应该适用于任何浏览器。在 Edge 中，只要我想缩放到的值为 1，它就会失败，但如果它是 1.0001 或 0.999999，它就会起作用，例如。这也因 scale() 和 scale3d() 而失败。

* {
  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>

Answer 1

根据MSDN：

The function scale(1, 1) leaves the element unchanged.

所以在这种情况下，IE 和 EDGE 的行为似乎不应该进行任何更改，而不是将元素缩放到其原始大小。

如果没有其他转换，可以重置应用的转换：

transform: none;

Answer 2

如果您设置原始宽度和高度，则 transform: scale(1, 1); 将起作用，否则，您将无法像这样重置您的转换。从给定的 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>

transform scale(1) 在 Microsoft Edge 中不起作用

transform scale(1) does not work in Microsoft Edge

css

css-transforms

microsoft-edge