background-image in body:before on IE not working

Question

I have created a webdesign with used body:before tag to 'split' the design, similar to the TwentyFifteen theme of WordPress (https://wordpress.org/themes/twentyfifteen/)

But I don't use a color for the "left" column, but an image. The Code works in all browsers fine (Chrome, FF, Safari) but not in IE (Version 9-11).

The CSS looks like:

body::before {
    background: url("img/back-left.jpg") no-repeat center top ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    content: "";
    display: block;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    z-index: 1;
}

The effect: the background picture was not showing, when open the page with IE. When I go to a sub-site, the picture was showing. When I transform the browser windows, the picture was showing. When I change ANYTHING (no matter what) in IE Dev toolbar, the picture was showing.

If I use background-color instead of background (or background-image), it works fine on IE.

Any ideas? I think it sounds like a rendering thing. The background image was rendered too late and so was not showing (instead I interact everthing on the page). But how to fix it?

Answer 1

I found a 'solution', that run into an other problem. ;-)

When I set

html, body { overflow: auto; }

Then, the background-image was displayed proper in IE 10 and IE 11. But now I have the IE 11 smooth scrolling problem (The background image jump all over the place when using the mouse wheel. When using the scrollbar, it works fine). Anyway, this variant is better for me, than not displaying the background-image. So I still hoping, that MS correct the smooth-scrolling bug.

I made a fork in CodePen with this correction: http://codepen.io/anon/pen/rabMMm

(this was the originally CodePen code: http://codepen.io/anon/pen/qEwEVy)

Or did any knows a solution to fix the smooth scrolling prolem from IE?