Background problem with Iphone 6, 7 and 8

Asked

Viewed 226 times

1

I created a layout and my background image is not appearing on Iphone 6, 7 and 8.Testing locally by Chrome appears quietly, but when I test on Iphone 8 it disappears getting only the background color. I tried to change the background-position and nothing worked. What can it be?

.bgParallax {
    margin: 0 auto;
    width: 100%;
    position: relative;
    min-height: 100%;
    background-position: 50% 0;
    background-repeat: repeat;
    background-attachment: fixed;
}

.container {
    max-width: 100%;
    padding: 0;
}

.container #imagem2 {
    background-image: url(../images/imagem2.jpg);
}

#imagem1,
#imagem2 {
    font: 70px futuraptbold, Arial, Tahoma, Sans-serif;
    color: #c4a376;
    letter-spacing: 1.3px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 795px;
    width: 100%;
    background-image: url(../images/imagem1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

#imagem1 span {
    display: block;
    margin: 0 auto;
}

#imagem1 span:last-child {
    line-height: 19px;
}

  <div class="container" style="width:100%;display: table;">

        <div id="imagem1"  class="row bgParallax" data-speed="5">
            <span>TEXTO 1</span>

         </div>
    </div>

  <div class="container" style="width:100%;display: table;">
        <div class="row bgParallax" id="imagem2" auto-speed="5">
            <span>TEXTO 2</span>
         </div>
     </div>

1 answer

1

Your problem really is with background-attachment: fixed

According to several reports this type of "effect" is very expensive for the browser, because it has to "reprint" the image on each scroll, with this the browser loses a lot of performance

Fixed-backgrounds have Huge repaint cost and decimate scrolling performance, which is, I Believe, Why it was disabled.

Fixed funds have an enormous cost of repainting and decimating roll performance, which I believe has been disabled.

You can read more in these two answers

https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7

Here’s a Turnaround made with a very simple jQuery script that can serve you.

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('.container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
#wrapper {
    background: #bada55;
    width:100%;
    height: 400px;
}
.container {
    background-image:url("http://farm3.staticflickr.com/2533/4062253262_90a3635234_o.jpg");
    background-attachment:scroll;
    background position:left top;
    background-size:cover;
    width:100%;
    height:300px;
}

#content {
    height:2000px;
}

p {
    line-height:1.5;
    font-family:sans-serif;
    font-size:3.875em;
    margin: 0 0 20px;
    text-align:center;
    color:#fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="wrapper">
    <div class="container"></div>
    <p>Scroll Down</p>    
</div>
<div id="content">
<div class="container"></div>
    <p>Scroll Down</p>  
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.