CSS effect works in Chrome but not IE 11

Question

I have a custom CSS button on my site, which rotates fine in Chrome, but Internet Explorer 11 is making it disappear when hovered over, instead of rotating.

You can see the button here (It's the blue "Search now!" button): LINK

When I remove this line from my index file, Chrome will then produce the same wrong effect as IE, so it makes me feel this is causing IE's issue.

<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>

Can you offer a solution? Thank you.

How does Firefox react? IE 10/9/8? – lucrativelucas Dec 30 '14 at 17:28 — lucrativelucas, Dec 30 '14 at 17:28

Sampson · Accepted Answer · 2014-12-30T19:09:08.320

Internet Explorer doesn't presently have support for preserve-3d, but the team is working to ship it in an upcoming release. That being said, simple examples like yours don't necessarily require this feature, and could be implemented in a more cross-browser manner.

I played a bit with replicating your effect by transitioning two pseudo elements independently:

enter image description here

<div id="button1">
    <!-- Preserved your markup -->
    <a href="#" data-text="Search Now!"></a>
</div>

a {
    position: relative;
    perspective: 500px;
}

a, a::before, a::after {
    color: #FFF;
    display: inline-block;
    line-height: 44px;
    box-sizing: border-box;
    width: 155px; height: 44px;
    backface-visibility: hidden;
    text-decoration: none;
    text-align: center;
}

a::before, a::after {
    top: 0; left: 0;
    position: absolute;
    content: attr(data-text);
    transition: transform 1s;
}

a::before {
    background: #0965A0;
    transform-origin: 50% 100%;
}

a::after {
    background: #2195DE;
    transform-origin: 50% 0%;
    transform: translateY(100%) rotateX(-90deg);
}

a:hover::before {
    transform: translateY(-100%) rotateX(90deg);
}

a::before, a:hover::after {
    transform: translateY(0) rotateX(0);
}

Fiddle: http://jsfiddle.net/jonathansampson/ybjv8d7x/

Thanks Jonathan, this looks awesome, but my html file has other a href links in it, so that CSS you provided messed it up. I then placed #button1 in front of every 'a', like #button1 a, a::before, a::after { but now the button disappears on hover. You can see here: http://taskbasket.net/gallery/ . What's wrong?? CSS File here: http://taskbasket.net/gallery/themes/matheso/style.css — Nova, Dec 30 '14 at 19:26
Wait, I fixed it by adding: #button1 a::before, #button1 a:hover::after { to the last part of the CSS. Thanks everyone! — Nova, Dec 30 '14 at 19:51

score 4 · Answer 2 · answered Dec 30 '14 at 17:33

4

Your effect needs preserve-3d to work.

And preserve-3d is not supported in IE, even though it is planned in the next version

By the way, it is a CSS related problem, javascript is working ok

answered Dec 30 '14 at 17:33

vals

61,425
11
89
138

Ok thanks, but how do I make the button in IE have a different animation, so that it doesn't disappear on hover? – Nova Dec 30 '14 at 17:46
@Nova Your best bet would be to detect if preserve-3d is available in the browser you're using and fork behavior based on that. [This question](http://stackoverflow.com/questions/24143408/ie9-11-detecting-transform-style-preserve-3d) appears to have a decent example you could use. – David Millar Dec 30 '14 at 18:24

CSS effect works in Chrome but not IE 11

2 Answers2