Incorrect Background Image on Iphone

Asked

Viewed 857 times

2

I’m using:

    <section class="parallax calltoaction section_padding_100"
    style="
        background-image: url('images/models_cover/landscapes.jpg');
        background-size:100% 100%;
        background-repeat: no-repeat;
    ">

When accessing through Chrome, firefox and safari via desktop works perfectly as in the image. inserir a descrição da imagem aqui

When accessing via Android Chrome browser, it works perfectly too. inserir a descrição da imagem aqui

But, when accessing via iPhone with the default browser or Chrome, it is as follows. inserir a descrição da imagem aqui

I already switched out the background-size: for cover and container, but it’s still the same.

css

  • Just tried "cover" or "100% cover"?

  • Opa @Perozzo, yes buddy, already tested with the cover, the 100% cover, and the container. Gives in the same

  • You can inform the other CSS attributes of this <section>? Maybe the problem is in them and not in the background.

  • It is very difficult to identify the problem without being able to verify it myself on an iPhone. But some research here may suggest some solutions. I would need to check the CSS better, but since you’re using Parallax, I imagine this background image should be receiving: background-attachment: fixed; I saw that can cause problems on iOS. Try to put a background-attachment: scroll; and checks the result.

  • I don’t have Iphone to test. But check out this answer: https://stackoverflow.com/a/21456799/2570426

2 answers

0

From what you can see in your HTML, you are using a class called Parallax. Probably this class is using the attribute background-attachment: fixed, because it is through this property that the simplest effect of Parallax is made.

What happens is that this type of effect is not performative on mobile devices, usually smartphones, and most browsers disable it by default. However, on iOS devices there is an error described by you, which instead of disabling the property background-attachment with the value fixed, he makes a kind of zoom that is not what we expected.

The solution that can be done in the case of a responsive page, where you want to get the effect of Parallax on the desktop and disable in mobile, is through Javascript, modify the value of the attribute background-attachment: fixed for scroll in all items using class .parallax. Or, if you rely on resolution to know if it’s mobile or desktop, you can set this in a media query in CSS.

0

Try the following code, it worked perfectly on my application 

html {
    background: url(http://placebear.com/1200/800) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}
body{
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Browser other questions tagged css

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