1

body{

background-color: #000;

height: 100vh;

}

section {
  width: 100%;
  height: 100%;
}

#section1 {
  background-color: #f0f0f0;
}

#bubbles1, #bubbles2{
width: 100%;
height: 100%;
top: 0;
left: 0;

z-index: -1;
}

#bubbles1{
  background: url('img/greencat.png') 60% 50% no-repeat fixed;
  background-color: #f0f0f0;
  
 
}

#bubbles2{
background: url('img/catb.png') 60% 50%  no-repeat fixed;

position: fixed;
-webkit-backface-visibility: hidden;

}

#fish{

background: transparent url('img/textgreen.png') no-repeat bottom left fixed;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
}
#fish1{

background: transparent url('img/textblue.png') no-repeat bottom left fixed;
    height: 100%;
    width: 100%;
   /* position: absolute;*/
    top: 0px;
}


@media screen and (max-width: 860px){


ound-image: url('img/greencat-mobile.png');
    background-size: 250vw 100vh;
    background-position: 53% 50%;
  }

  #bubbles2{
    background-image: url('img/catb-mobile.png');
 
    background-size: 250vw 100vh;
    background-position: 53% 50%;
    position: fixed;
    -webkit-backface-visibility: hidden;

  }
  #fish{
    background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/06/Barnsley-House-Spa-2-844x800.jpg') no-repeat 3% 78% fixed;
    position: absolute;
   }
  #fish1{
    background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/08/Fairmont-Pittsburgh-30-844x800.jpg') no-repeat 3% 78% fixed;
  }


}
<section id="section1">
  <div id="bubbles1"></div>
  <div id="fish"></div>
</section>
<section id="section2">
  <div id="bubbles2"></div>
  <div id="fish1"></div>
</section>

This is my html and css, the problem is when i scroll on mobile devices than image is flikering, not stick to the fixed position. I gave the position fixed in css but it is not working. I checked on Android, Windows and Apple devices. Android : first image moved up on scrolling Windows : first image displaying proper but when i scroll for second image than its flikering Apple : display white background insted of image, second image visible but its flikering on scroll

Hiren Patel
  • 61
  • 9

1 Answers1

0

Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.

i came across this problem too. i know 3 possible fixes for this

1. you can try using a pseudo-element and add background fixed to it

2. you can make another div inside the fixed div. and add background to that div

3. use -webkit-transform: translateZ(0x); transform:translateZ(0) to force hardware acceleration

see more here

let me know if it helps

Community
  • 1
  • 1
Mihai T
  • 17,254
  • 2
  • 23
  • 32