2D transforms not working in IE11 / Windows 10

[tdrsam]

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]

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]

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

[IanLunn]

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]

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

[tdrsam]

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: [email protected]
To: [email protected]
CC: [email protected]
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]

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

Date: Mon, 14 Sep 2015 06:28:18 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
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]

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]

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

[gfdesign]

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]

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

[gfdesign]

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

[IanLunn]

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

[schwindyboo]

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]

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]

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

[IanLunn]

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]

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.