Background-image: cover, flickering images - css

Question

I make use of many covered background-images.
If i use the same image within the page content area and inside the fixed left panel it flickers very heavy.
Reproduced:
http://jsfiddle.net/7aUnL/8/
HTML:
<div class="wrapper">
<div class="inner">
<div class="header cover">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="image cover"></div>
</div>
</div>
</div>
<div class="flickermaker">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="icon cover"></div>
</div>
CSS:
div.wrapper {
float: left;
width: 100%;
}
div.inner{
margin-bottom: 120px;
margin-left: 252px;
margin-right: 12px;
position: relative;
}
div.header {
display: inline-block;
margin-bottom: 10px;
min-height: 140px;
overflow: hidden;
padding-bottom: 8px;
position: relative;
width: 100%;
}
div.image {
bottom: 0;
box-shadow: -3px 0 5px 3px rgb(0, 0, 0);
float: left;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 140px;
z-index: 2;
}
.cover {
background-color: rgb(248, 248, 248);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
div.flickermaker{
border-right: 1px solid rgb(205, 205, 205);
bottom: 0;
height: auto;
left: 0;
margin-left: 0;
top: 0;
z-index: 999;
font-size: 0.85em;
overflow: hidden;
width: 240px;
position: fixed !important;
}
.icon {
border-left: 3px solid rgba(114, 184, 251, 0.4);
height: 100%;
left: -3px;
position: absolute;
transition: border-color 0.3s ease 0s;
width: 50px;
height:50px;
}
Without the small icon the problem disappears. Any suggestions?
Edit: with a smaller version of the same image everything is fine:
http://jsfiddle.net/nxU3s/1/

Answer 1

The "flickering" image is a 1.6MB 1920x1080 file, most likely some browsers are not yet ready to deal with this range of dimensions (Firefox flickers, Chrome does not). Background-size is a pretty new property so don't expect perfect support in such extreme cases.
Anyway I can't see a serious real life application of your example. Use thumbnails instead of high definition images. You also need to clean your markup which is quite a nonsense.
In the end consider the <img> tag who will be most of the time easier to use .