erotte erotte - 4 months ago 39
CSS Question

transform scale(1) does not work in Microsoft Edge

I have problems performing a simple transform:

scale()
in Microsoft Edge.
I created a simple test case that should show a submenu on hover via scaling the
scaleX()
property. This should work in any browser.
In Edge it fails as long as the value I like to scale to is 1, but works if it's 1.0001 or 0.999999, for example. This also fails with
scale()
and
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

According to MSDN:

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

So it seems in such cases IE and EDGE behave like no changes should be done rather than scale an element to its original size.

If there're no other transformations, it's possible to reset the applied transformation:

transform: none;