CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-11
Cyril R.
Cyril R.

Reputation: 21

Absolute background on pseudo-element ::before on IE 11

My problem is pretty weird. I have a background in a container::before, absolute-positioned and on every browser it works perfectly.

On IE 11 when I first load my page, my background only takes the width of my container (both sides are not visible). When I open my debugger or when I move the window the sides are revealed.

I tried this hack but it doesn't work. 

.connexion-layout {
    position: relative;
    overflow: hidden; 
}
.connexion-layout .container {
    padding-top: 200px;
    padding-bottom: 200px; 
}

.connexion-layout .container::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: none no-repeat center center / cover; 
}

@media screen and (min-width: 980px) {
    .connexion-layout .container::before {
        background-image: url("../../theme/images/connexion-bg-desktop.jpg?1433411383"); 
    } 
}
@media screen and (max-width: 979px) {
    .connexion-layout .container::before {
        background-image: url("../../theme/images/connexion-bg-mobile.jpg?1433411383"); 
    } 
}

Have you ever had something like this?

Upvotes: 2

Views: 2176

Answers (2)

tayvano
tayvano

Reputation: 1338

When you say "it corrects itself when I resize the window or open the console" you are actually saying "forcing a browser repaint".

I haven't encountered this exact issue, but I did have a similar one with webfonts in Chrome a while back. It had to do with the order of loading.

So, based on that information, I'm going to guess that because the browser renders things in order, it's rendering the :before element first, then the parent element. However, the :before element's position is based upon the parent element (which it hasn't loaded yet) so it goes to the next available positioned element. When you resize, everything is loaded so it's fine.

There are two things I would try.

First, if you can, move it to the :after element. That may fix it. Since it is absolutely positioned, the :before vs :after shouldn't matter.

If that isn't possible, you can use a javascript/jquery repaint hack.

if($('html').hasClass('ie11')) {
  $('.connexion-layout').hide(0, function(){$(this).show()});
}

Alternatively, you can try this in CSS. Load it at the bottom of your CSS. Again, this was meant for fonts but it should force a repaint regardless:

.ie11 body {
  animation-duration: 0.1s;
  animation-name: repaint;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-delay: 0.1s;
}

@-webkit-keyframes repaint {
  from { opacity: 1; }
  to { opacity: 1; }
}

Both the jquery and css assume you have a classname of ie11 on your <html> so that you don't unnecessarily repaint other browsers.

I don't have a PC at the moment, so please let me know if none of these work and I'll find my BrowserStack login and give it a whirl.

Upvotes: 0

Mike Gleason jr Couturier
Mike Gleason jr Couturier

Reputation: 9186

Adding position: relative; to the parent fixed this exact same bug for me.

Upvotes: 1

Related Questions