Background problem with Iphone 6, 7 and 8

Question

Background problem with Iphone 6, 7 and 8

Navigation

#1 by (1 votes)

0

I created a layout and my background image is not showing up on Iphone 6, 7 and 8.Trying locally for Chrome appears quietly, but when testo on the Iphone 8 it disappears getting only the background color. I already tried to change 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>

html css css3 twitter-bootstrap bootstrap-4

asked by anonymous 12.06.2018 / 17:27

1 answer

Error executing INTERSECT in MySql How to change a name of a string

score 1 · Answer 1

Your problem is actually with background-attachment: fixed

According to several reports this type of "effect" is very expensive for the Browser, because it has to "reprintar" the image with each scroll, with that the browser loses much the performance

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

Fixed funds have a huge cost of repainting and decimate scrolling performance, which, I believe, has been deactivated.

You can read more about these two answers

link

Here's a turnaround 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><divid="wrapper">
    <div class="container"></div>
    <p>Scroll Down</p>    
</div>
<div id="content">
<div class="container"></div>
    <p>Scroll Down</p>  
</div>