IE: Background Image does not display. Browser repaints on hover? - html

Question

So this is one of the strangest IE bugs I have come across, and it's happening in IE11!
I have a simple element that looks as follows:
<div class="article">
<div class="wrapper">
<header><h1>Hello World</h1></header>
<div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'> </div>
</div>
</div>
with the following CSS:
*{margin:0;padding:0;}
.article {
height:200px;
background:aliceblue;
}
.wrapper {
height:100%;
display:table;
width:100%;
}
header, .image {
display:table-row;
width:100%;
}
header {
background:red;
height:10px;
}
.article:hover .image {
opacity:0.5;
}
For a JSFiddle click here (you might need to click Run to see the bug appear)
The issue is that when starting the page we do not see the background-image. When you hover over .article then the image suddenly appears! When hovering out the image remains (as expected).
It is as if the browser only repaints the background-image when the user hovers?
The image does not display on initial page load
The image displays on a mouse hover, the image will remain afterwards
How can we display the background-image by default?
Fiddle > http://jsfiddle.net/ykrbe4zy/

Answer 1

The key problem with image is that you're applying the display: table-row; for the image which seems not supported by IE properly.
Use display: inline-block; instead:
.image{
display: inline-block;
height: 100%;
}
here's the working demo

Answer 2

Change below code
from :
header, .image {
display: table-row;
width: 100%;
}
header {
background: red;
height: 10px;
}
TO
header, .image {
display: block;
width: 100%;
height: 100%;
}
header {
background: red;
height: 40px;
}
Updated Fiddle : http://jsfiddle.net/ts8ahznd/7/
Updated Code:
CSS
* {
margin: 0;
padding: 0;
}
.article {
height: 200px;
background: aliceblue;
}
.wrapper {
height: 100%;
display: table;
width: 100%;
}
header, .image {
display: block;
width: 100%;
height: 100%;
}
header {
background: red;
height: 40px;
}
.article:hover .image {
opacity: 0.5;
}
HTML
<div class="article">
<div class="wrapper">
<header>
<h1>Hello World</h1>
</header>
<div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'> </div>
</div>
</div>
Hope this will help!!!