background-attachment: fixed; Not working in mobile devices

Question

I'm using background-attachment: fixed; for the background image, it's working fine on the desktop for all browser and fine on desktop mobile view but when I checked it on real devices its looks varied any suggestion will be appreciated.

Desktop mobile view https://i.stack.imgur.com/Vmrc7.png

Original mobile view https://i.stack.imgur.com/nhUaP.png

Thanks!

score 0 · Answer 1 · answered Dec 31 '20 at 07:35

This seems to be a common problem, I'm guessing you checked this on either chrome or safari? One possible workaround is by adding transform code into your element's css that has the background-fixed property.

#element{
background-image: url(https://images.unsplash.com/photo-1495578942200-c5f5d2137def?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1354&q=80);
color: #fff;
width: 100%;
height: 600px;
position: relative;
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

Working js fiddle: https://jsfiddle.net/Vaulient/f5zy2udt/2/

Add on to my css with this solution: https://stackoverflow.com/a/45159359/11117237 — Vaulient, Dec 31 '20 at 12:45

score 0 · Answer 2 · answered Dec 31 '20 at 10:31

Can you please check the below code? Hope it will work for you. background-attachment: fixed; is create an issue in mostly iOS real devices so we have to try to implement using jQuery function $(window).scrollTop().

Please refer to this link: https://jsfiddle.net/yudizsolutions/e3xgtqz4/9/

$( document ).ready(function() {
  $(window).scroll(function() {
    $('body').css('background-position', 'center ' + $(window).scrollTop() + 'px');
  });
});

body {
    background: url('http://www.jquery-az.com/html/images/banana.jpg') no-repeat center center / cover;
    color: #fff;
    width: 100%;
    height: 100%;
    min-height: 600px;
    display: block;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
</body>

It's creating an issue. when we scroll up or down then the background image also go up and down and after that it back to fixed position.. sorry not a good solution — Aman, Dec 31 '20 at 10:38

background-attachment: fixed; Not working in mobile devices

2 Answers2