CSS Fixed background scaling / panning not playing nice with iPad

Question

I have used the search function thoroughly and have not found any answers relevant enough to fix my problem.

On my new website, I am implementing a single fixed background image (roughly 250x250px), set to follow the user as they scroll down the page. From other posts and my own experimentation, the CSS property "background-attachment:fixed" does not work with iPad / iPhone browsers.

One user suggested a workaround of creating a "background-wrap" div that looks like this:

#background-wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url('xx.jpg');
    background-attachment: fixed;
}

Which works, to an extent. The problem with this solution (for me) is that when a user pinches and zooms on a mobile device, the background image scales differently than the foreground content, creating a sloppy, overlapping result.

Please forgive me if the answer is in plain sight. I've researched this for hours (on this site and a few others) with no avail. Many thanks in advance.

Answer 1

It is specified on Caniuse that background-attachment: fixed is not working correctly in iOS Safari, as you correctly mentioned.

I would suggest you to apply position: fixed to your background element, this should work properly in all modern browsers nowadays: Caniuse

If you would provide more HTML / CSS code matching your problem I probably could have given you more details on this one.