Как заставить Microsoft Edge обрабатывать мой CSS для 3D в перспективе правильно для мыши?

Question

Я использую свойства css perspective и transform для создания 3D-мира в html. В Google Chrome все работает без проблем, но в Microsoft Edge есть что-то нехорошее в этом ... Я сузил его, используя этот jsfiddle: https://jsfiddle.net/uke8bsvk/12/

Третий вариант в скрипке - это ошибка. Он отлично работает в Google Chrome, но в Microsoft Edge каким-то образом красный div плохо реагирует на зависание его с помощью мыши, изменив его цвет на зеленый. Он реагирует только на зависание его с помощью мыши, расположенной ближе к нижней части красного div.

В четвертом варианте я удалил transform-style: preserve-3d для красного div, и все снова работает отлично.

У кого-нибудь есть идея, что здесь происходит и как его решить?

PS. В моем реальном случае у меня иногда есть дочерний div, для которого требуется сохранение 3d, и иногда у меня нет дочернего div. На самом деле это не вариант использования очевидной грязной работы по настройке и удалению transform-style: preserve-3d в зависимости от наличия дочернего div.

Answer 1

Я нашел относительно чистый трюк/работа вокруг, чтобы «решить» проблему: просто добавьте дополнительный дочерний div, сделайте его невидимым и поверните его из плоскости с помощью transform: rotateX(1deg). См. Jsfiddle: https://jsfiddle.net/uke8bsvk/13/

Answer 2

Вам необходимо прикрепить 3d-объекты в css, используя Autoprefixer. Вы можете сделать это на самом сайте или добавить его в качестве расширения для вашего редактора кода.

Это добавит некоторые из этих префиксов кода, как так:

-webkit-transform-origin: bottom left; 
     transform-origin: bottom left; 
-webkit-transform: rotateX(30deg); 
     transform: rotateX(30deg); 
     background: red; 
-webkit-transform-style: preserve-3d; 
     transform-style: preserve-3d; 

Вот обновленный Fiddle.

Вы должны префикс каждый один из ваших проектов в Интернете.