Animation doesn't work in IE10

Browser & Compatibility
1

Hi there

Ive created a “landing page” for my old office.

now i have a big problem. it doesnt work in internet explorer 10 (in IE9 works)

in the header ive paste this code in:

<meta http-equiv="X-UA-Compatible" content="IE=8; IE=7; IE=5; IE=6; IE=9; IE=10; IE=11" />

in IE10 the animation stop after the first animation and looks like this:

Bildschirmfoto 2015-11-27 um 10.56.11.png1455×1119 9.36 KB

but its should look like this after a fade transition:

Bildschirmfoto 2015-11-27 um 10.56.16.png1447×1116 57.4 KB

have anybody a idea ?
Thank you for every answer.

sorry for the bad english :smiley:

2

so now ive change the code to:

	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />

but it still doesnt work on IE10

3

not sure this is the problem but I’ve found this behavior using the 3d space.

All elements are made in 2d (x and Y = 0 )?

in IE 10/11 the “transform-origin: preserve-3d” CSS feature is missing. So, some elements may be flattened (with issues), depend on the Z-index.

4

so wenn i add this to the css, then works?
and where can I find the css file?

5

put this code in the header and add the class to the group " ie11fix " ( absolute postion)

<style type="text/css">
.ie11fix  {   /* Fixed issue in internet explorer 10-11 in CSS3 transform Property */
position: absolute !important;    
}
</style>

this is the CSS code "preserve-3D "

-webkit-transform-style: preserve-3d !important;
-moz-transform-style: preserve-3d !important;
-o-transform-style: preserve-3d !important;
transform-style: preserve-3d !important;
-ms-transform-style: none !important;
-ms-transform: none !important;

No support in IE 10/11

6

Just FYI, i’m hearing that Microsoft is doing away with Internet Explorer. NO MORE SUPPORT for it. So anyone still on IE will be in for some disappointment browsing experience if they don’t change from one browser to another like Chrome. In fact, I’ve heard that since windows 10, they no longer support IE of any versions but a different browser from that point on. I’m a mac user so, but when I design websites for clients, me and my business partner do have several most popular browsers we use to ensure all cross compatibility and yes we do have to sacrifice certain features if they don’t all work at the same time. It’s just disappointing that not all browsers have similar packages and we have to keep adjustment for them.

7

Here's the new Windows default browser: Get to Know Microsoft Edge

"According to caniuse.com CSS support in Edge is roughly 6% better than IE11, exactly the same rate of progression from IE10 to IE11. The steady pace suggests that under the hood, Edge is very much IE12."

Luckily, Hype handles (most) of these headaches for you :slight_smile: