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：

函数scale(1, 1)使元素保持不变。

因此，在这种情况下，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中不起作用

2 个答案: