масштаб преобразования (1) не работает в Microsoft Edge

У меня проблемы с простым преобразованием: scale() в Microsoft Edge. Я создал simple test case, который должен отображать подменю при зависании путем масштабирования свойства scaleX(). Это должно работать в любом браузере. В Edge он не работает, пока значение, которое я хотел бы масштабировать, равно 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

Это Microsoft края, а не IE края, кстати. IE - это совсем другой браузер. – TylerH

Я зарегистрировал [ошибку в Microsoft Edge] (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8347513/) на основе взаимодействия. – Sampson

В соответствии с MSDN:

Функция scale(1, 1) оставляет элемент неизменным.

Так что, похоже, в таких случаях IE и EDGE ведут себя так, как будто никаких изменений не должно быть сделано, а не масштабировать элемент до его первоначального размера.

Если не вы никаких других преобразований, можно сбросить приложенное преобразование:

transform: none;

источник

2016-08-01 14:12:28

... но он был увеличен до 'scale (0,0) 'before. Итак, есть ли возможность сбросить элемент до его первоначальной шкалы? – erotte

@erotte Я обновил свой ответ. Пожалуйста, посмотри на это. –

Да, я также получил его и зафиксировал в этом примере. Так просто и глупо, не могу поверить, что ... Спасибо большое! – erotte

если установить первоначальную ширину и высоту, то 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>

источник

2016-08-01 14:31:29

, кстати, масштаб не поддерживается в Opera mini, а также имеет проблемы с FF, http://caniuse.com/#search=transform –

масштаб преобразования (1) не работает в Microsoft Edge

ответ

Смежные вопросы