css - transform scale(1) does not work in Microsoft Edge -


i have problems performing simple transform: scale() in microsoft edge. created simple test case should show submenu on hover via scaling scalex() property. should work in browser. in edge fails long value scale 1, works if it's 1.0001 or 0.999999, example. fails 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, 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 trick!</li>        <li>so stupid!</li>      </ul>      </li>  </ul>  <div class="content">  <h1>huhuuuh,</h1>    <p>obviously ie edge (current version on surface pro) has problem hiding , showing elements via scale transforms factor 1. long not integer(1) 0.9999 or 1.0001, works.    </p>    <p>just try out here , change values sure.</p>  <p>  ie version:    <br />  microsoft edge 25.10568.0.0  <br />  microsoft edgehtml 13.10568.0.0      </p>    </div>

according msdn:

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

so seems in such cases ie , edge behave no changes should done rather scale element original size.

if there're no other transformations, it's possible reset applied transformation:

transform: none; 

Comments