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

2D transforms not working in IE11 / Windows 10 #71

Closed tdrsam closed 8 years ago

tdrsam commented 9 years ago

I put a hover effect on the nav menu on my site and it works in Chrome & FF but not in IE. Just in case it makes a difference, I also have a CSS animation effect on another element, plus a jQuery animation effect which is on the same element as the CSS one, but it's a different element to the one the hover effect is on.

I tried adding the -ms- prefix to all the transform and animation attributes to all the lines of the hover CSS, so now they all have the basic transform or animation attribute as well as the webkit prefix and the -ms-prefix. I even tried putting them in the correct order (not that it matters) but it's not going.

Are there any known issues that could be causing this?

IanLunn commented 9 years ago

There are no known issues. I have browser tested in IE so effects should work where the right properties are supported. Which effect(s) and version of IE are you seeing this in?

tdrsam commented 9 years ago

I'm testing in IE11 and the effect is buzz-out.

IanLunn commented 9 years ago

Can you check it works on the official effects page please? Seems ok to me in IE11 Win7/8. If it's specific to your CSS, please post a reduce-test case.

IanLunn commented 9 years ago

Closing as this works in my testing. Let me know if you're still having an issue.

tdrsam commented 9 years ago

That's fine. I think it was some kind of clash with some functions I had. I don't need that webpage anymore, anyway.

Date: Mon, 14 Sep 2015 06:28:18 -0700 From: notifications@github.com To: Hover@noreply.github.com CC: tdrsam@hotmail.com Subject: Re: [Hover] Any known issues in IE? (#71)

Closing as this works in my testing. Let me know if you're still having an issue.

— Reply to this email directly or view it on GitHub.

tdrsam commented 9 years ago

I found the cause. User Agent Stylesheets. Which I fixed with a reset.css

Date: Mon, 14 Sep 2015 06:28:18 -0700 From: notifications@github.com To: Hover@noreply.github.com CC: tdrsam@hotmail.com Subject: Re: [Hover] Any known issues in IE? (#71)

Closing as this works in my testing. Let me know if you're still having an issue.

— Reply to this email directly or view it on GitHub.

gfdesign commented 8 years ago

Hi There First of all, thank for this great resource but today when I start to use it, I realize it doesn't work in IE11 (and IE10) Also, I've tested in the official page but it doesn't work as well. (FYI, the 2D Transitions are what don't work as expect)

Could you tell me what could be the problem and how to fix it? Thanks

IanLunn commented 8 years ago

Please provide operating system version and full version number for Internet Explorer.

gfdesign commented 8 years ago

Hi Ian I have W10 Pro with IE11. Also, I've reviewed it using Browserstack and I got the same results with W10, but when I test it using W8.1 on IE11 it works fine. Therefore, it seems the problem comes from SO side. Regards

IanLunn commented 8 years ago

SO side? What is that? Are you using a touch-capable device?

gfdesign commented 8 years ago

Sorry my English, I wanted to say OS (Operating System) :P

IanLunn commented 8 years ago

Ok. I see the same issue in IE11 on Windows 10 via Browserstack. Will look into it.

schwindyboo commented 8 years ago

Hi Ian,

Is there an update on this? I think your library is fantastic but I am experiencing the same as above (Win 10, IE11)

Thanks

Alex

SaphuA commented 8 years ago

Like I mentioned in #102 this issue is fixed for me once I remove transform: translateZ from the css class. So I guess this has something to do with hardware acceleration? FYI: Disabling hardware acceleration doesn't do anything.

It also seems to be related to Win10 as others are mentioning. I tested it on Win7 and it works fine there.

My laptop contains a Intel HD Graphics 520. I can't figure out if it's supposed to support hardware acceleration.

malreynolds commented 8 years ago

Can confirm experiencing same issue on Win10/IE11 combo and removing transform: translateZ fixes it.

IanLunn commented 8 years ago

It looks as though the issue is actually the backface-visibility: hidden property. Bug reported here. I would recommend removing that property instead of transform: translateZ(0) so you can still get hardware acceleration.

I'll look into this further to see if a workaround can be added but it may mean making the library worse in all browsers to fix a few.

IanLunn commented 8 years ago

This should now be working in IE 11 / Windows 10. I removed the backface-visibility: hidden property that improved font smoothing (weirdly) in Firefox and Chrome which was also the cause for the issue in IE 11.