CODEWITHSUNDEEP
htmlcss
John Cooper
John Cooper

Reputation: 7651

CSS Fliping animation not working in IE 9 or 10

I have created a simple CSS flip animation which works in other major browsers, seems to be not working in IE 9.0 or 1.0 for some reasons.

jsbin handler. http://jsbin.com/IQUqUBe/1/

Below is the links which i have looked upon.

  1. https://github.com/vinothbabu/3DFlipper
  2. http://davidwalsh.name/demo/css-flip.php

I am not able to figure out where is the issue whether its z-index or any other property which is causing this issue and also can you guys suggest on how to debug CSS code if possible.

Upvotes: 1

Views: 95

Answers (3)

Thalaivar
Thalaivar

Reputation: 23642

Its not that it does not work in IE 10. set a doctype at the top: <!DOCTYPE html> This will take IE out of quirks mode. Below is the fiddle for the same.

http://jsbin.com/IQUqUBe/3/edit

This should make the code to work in IE.

Upvotes: 0

Kaidjin
Kaidjin

Reputation: 1513

I don't know what the problem is specifically, but here is a link saying that transition does not work in IE9: http://caniuse.com/#search=transition

If you go in the "issues" tab, you'll see that it doesn't work on any pseudo-elements beside :before and :after for IE10 (and others).

EDIT: As pointed out in the comments, :hover is a pseudo class, and the link doesn't say that it doesn't work for IE10. I still don't know why it doesn't work.

Have you tried removing the -ms- prefix ? Apparently IE10 supports the transition without prefix.

Upvotes: 0

matewka
matewka

Reputation: 10158

When it comes to debuging CSS code you can use developer tools.

Upvotes: 1

Related Questions