CODEWITHSUNDEEP
javascriptjquerycssbackground-image
Alex Steinberg
Alex Steinberg

Reputation: 1466

Jerky/flickering background image on scroll on Webkit and Edge (jQuery and vanillaJS)

I am using jQuery to make a background image appear fixed (since background-attachment: fixed doesn't play nicely with background-size: cover). In some environments the image doesn't flicker but in others it does, and I can't figure out why. (A related but different question is here, but I'm not using parallax scrolling.)

It doesn't flicker here and on this fiddle:

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#bg').css('background-position', 'left ' + scrolledY + 'px');
});
body {
  height: 3000px;
  margin: 0;
}

#bg-wrap {
  position: relative;
  width: 100%;
}

#bg {
  height: 600px;
  width: 100%;
  position: relative;
  background-attachment: scroll;
  background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover!important;
}

#bg-text {
  position: absolute;
  top: 200px;
  left: 47%;
  font-size: 3rem;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg-wrap">
  <div id="bg">
  </div>
  <div id="bg-text">Hello!</div>

It flickers here when using Webkit and Edge browsers (but doesn't flicker on IE and Firefox).

Over here it flickers until one initializes a Google Map by clicking on the "Region Map" tab.

Any help as to understanding the cause and providing a possible fix would be greatly appreciated.

Upvotes: 3

Views: 2356

Answers (2)

Alex Steinberg
Alex Steinberg

Reputation: 1466

While I still don't know what is causing the issue on the test page, I fixed my original problem by removing a rogue CSS transform!

Upvotes: 0

Bart Calixto
Bart Calixto

Reputation: 19705

Try using:

transform-style:flat

on the css rule of the flickering image

or 

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

Upvotes: 1

Related Questions