transform: translate() and matrix3d() break hover and click in Microsoft Edge

爱⌒轻易说出口 提交于 2020-01-07 03:00:28

问题


A situation arises with block elements that use transform: translate() and matrix3d() as part of an animation sequence (animation is by GSAP, but that shouldn't be relevant to the problem since all GSAP does is update CSS properties in real-time).

Expected: Regardless of size or position, elements should remain interactive to mouse. (works properly in Chrome, FF, Safari, IE11).

Actual: Some will work, once or twice, if you're lucky, and then after that none of the others will respond to the mouse (bad behaviour in MS Edge).

Here is a working use case of this issue: idx.klick.com (click past the welcome screen and try playing with the floating balls)

Has anyone encountered this or found a solution?

来源:https://stackoverflow.com/questions/35927822/transform-translate-and-matrix3d-break-hover-and-click-in-microsoft-edge

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!