search

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
http://ianlunn.github.io/Hover/
Other
29.25k stars 5.78k forks source link

Unneeded transform: translateZ property removes support for IE11. #102

Closed SaphuA closed 8 years ago

SaphuA commented 8 years ago

It seems like some styles, like hvr-grow, are using transform: translateZ(0) which is causing issues in IE11. Removing these lines makes it work perfectly. Perhaps they can be removed for styles that do not require them?

https://github.com/IanLunn/Hover/blob/master/css/hover.css#L18-L19

IanLunn commented 8 years ago

The use of transform: translateZ(0) is a well-known hack to cause supporting browsers to use hardware acceleration for the animations and improve FPS. Can you elaborate on the issues in IE11 please and I'll look into it?

SaphuA commented 8 years ago

When I navigate to http://ianlunn.github.io/Hover/ using IE11 none of the 2d transition animations work. The element isn't rendered for the duration of the animation. However, when I remove translateZ most of them work as expected. Or could this be an issue specific for my machine?

IanLunn commented 8 years ago

It is an issue that has previously been reported. I am unable to reproduce but you are the 3rd person reporting it so obviously something is going on. Please see this issue: https://github.com/IanLunn/Hover/issues/71