Internet Exporer 9 vs. Internet Explorer 11

Question

I am new to IE 11 and am having an issue with code that works perfectly fine in IE 9, but when viewed in IE 11 it's having a completely different effect. In IE 9 this code below displays the text properly by default and the hover over functionality works fine. In IE 11 the text only displays on hover over and it almost looks like an animated effect pulling in over the image on hover. Can anyone lend any insight why the behavior is different?

<!DOCTYPE HTML>

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

  <title>test</title>

<style type="text/css">

/* generic css */
.view {
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    font-family: Raleway, serif;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Merriweather, serif;
    font-style: italic;
    font-size: 14px;
    position: relative;
    color: #fff;
    padding: 0px 20px 0px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    font-family: Raleway, serif;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

/*2*/

.view-second img {  
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
}
.view-second .mask { 
    background-color: rgba(12, 19, 27, 0.6); 
    width: 300px;
    padding: 105px;
    height: 200px;
    opacity: 0;
    transform: translate(265px, 145px) rotate(45deg);
    -webkit-transform: translate(265px, 145px) rotate(45deg);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    font-family: Raleway, serif;
    background: transparent;
    margin: 20px 40px 0px 40px;
   -webkit-transform: translate(200px, -200px);
    transform: translate(200px, -200px);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.view-second p { 
    transform: translate(-200px, 200px);
    -webkit-transform: translate(200px, -200px);
    transition: all 0.2s ease-in-out;
   -webkit-transition: all 0.2s ease-in-out;
}
.view-second a.info { 
    transform: translate(0px, 100px);
    -webkit-transform: translate(0px, 100px);
    transition: all 0.2s 0.1s ease-in-out;
    -webkit-transition: all 0.2s 0.1s ease-in-out;
} 

/* */

.view-second:hover .mask { 
    opacity:1; 
    transform: translate(-80px, -125px) rotate(45deg);
    -webkit-transform: translate(-80px, -125px) rotate(45deg);
}                             
.view-second:hover h2 { 
    transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    transition-delay: 0.3s; 
    -webkit-transition-delay: 0.3s; 
}
.view-second:hover p { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
}
.view-second:hover a.info { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

</style>

</head>

<body>

<div id="all">

<div class="view view-second">
  <img src="http://jacobstone.co.uk/Livetesting/book.jpg" />
    <div class="mask"></div>
    <div class="content">
        <h2>CorpTax Mapping Change</h2>
        <p>Request for the remapping of CORPTax Balance Sheet or P&L accounts.</p>
        <a href="#" class="info">Click Here</a>
    </div>
</div>

</div>

</body>

</html>

score 1 · Accepted Answer · edited Nov 19 '14 at 22:11

1

Yeah, this code contains a lot of "animation" like effects, such as transitions and translations. These won't show in IE9, because IE9 doesn't support those.

transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
transition-delay: 0.3s; 
-webkit-transition-delay: 0.3s;

What's happening is that IE11 is displaying the code as written, but IE9 isn't, and it just happens to be how you want it. You could start by going through and removing all lines that say anything like or "transition" or "animate" and see where that gets you.

EDIT: As TylerH reminded me, the translations do work in IE9, but the animation effects will not.

edited Nov 19 '14 at 22:11

Sampson

265,109
74
539
565

answered Nov 19 '14 at 21:44

Barry T. Smith

1,021
7
10

One small nitpick; IE9 supports transforms with the `-ms-` prefix. Still the same result, though, because that prefix isn't used in OP's code. – TylerH Nov 19 '14 at 21:46
Ah yes, good catch. The animations, however, won't work. Will edit. – Barry T. Smith Nov 19 '14 at 21:49
Internet Explorer 9 supports [tramsformations](http://msdn.microsoft.com/en-in/ie/hh393506.aspx). What confuses me is how the non-animated version is described as the "perfectly fine" version, when it's actually failing to do what the author intended. – Sampson Nov 19 '14 at 21:49
So shoudnt I just be able to simply emulate IE 9 i.e. ? This doesnt funciton consistent with 9 either. – BvilleBullet Nov 19 '14 at 21:50
2

@BvilleBullet Just remove the transitions if you don't want them. The *emulation* is designed to render pages created for older versions of IE within modern versions of IE, but this page (with the animations, etc.) was designed for a modern IE - why else would you have CSS Animations? – Sampson Nov 19 '14 at 21:52
Yes, that might work. See this for more details, as IE11 has some changes to that spec: http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e. But ultimately, that's not the best solution. I assume you're borrowing this code from somewhere else, but you should delete code that you're not using. The meta tag won't affect how it's viewed in other modern browsers like Chrome. – Barry T. Smith Nov 19 '14 at 21:52
thanks I am inheriting code that needs to be remediated for IE 11 or in this case IE 9. – BvilleBullet Nov 19 '14 at 21:55

Internet Exporer 9 vs. Internet Explorer 11

1 Answers1