Background image with infinite scroll in iOS 13.3

  • Resolved ceol

    (@ceol)


    4 years, 10 months ago

    Hello.
    My site uses a background image with options in Appearance>Customise>Background Image: ‘fill screen’ and without ‘Repeat background’ and ‘scroll with page’ i.e. both deselected.
    Everything fine with Chrome in OSX/Android and in OSX Safari v13.

    Problem –
    In iOS Safari (v13.3), [background image is displayed as if settings were: Image size:’Original'(or very zoomed in anyway) and as if ‘Repeat background’ and ‘scroll with page’ were both selected] seems as ‘fill screen’ is constantly resizing image in relation to infinite scroll, while its initial size seems to be very zoomed in.
    If ‘scroll with page’ is selected, background image is sized correctly but this messes up the design.

    Unfortunately I don’t have access to other iOS devices to compare this with though pretty sure problem not present in previous iOS versions.

    Any help most welcome.
    Many thanks

    • This topic was modified 4 years, 10 months ago by ceol. Reason: more information re problem
    • This topic was modified 4 years, 10 months ago by ceol.
    • This topic was modified 4 years, 10 months ago by ceol.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @ceol,

    The background image feature is a Core WordPress feature, so it’s not specific to Hamilton. However, when you set the background image to “Fill Screen”, WordPress applies a CSS property called background-attachment: fixed; on desktop. This causes the image to scroll with the browser window when you scroll on the page (the image is fixed in the same position).

    This property is not supported in Safari on iOS, however, which is why the image is displayed differently there. There are workaround for getting a fixed background image on mobile browsers, but they require some custom development to get working. You can read more here, if you’re interested: https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

    — Anders

    Thread Starter ceol

    (@ceol)

    Hi Anders.

    Thanks for your reply. Thought I found a fix with this:

    html {
background-size: cover;
height: 100%;
overflow: hidden;
}
body
{
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

    which which seemed to work but unfortunately overflow: hidden; results in hiding related posts/pagination where they would normally appear below post content. Removing this brings the other problem back (image background zoom in iOS).

    Any idea how I could get around this?
    I can’t believe this problem persists in iOS which messes up such a common and universally used design feature.

    Thanks again

    • This reply was modified 4 years, 10 months ago by ceol.
    Theme Author Anders Norén

    (@anlino)

    Hi @ceol,

    There are some possible workarounds, like adding an element set to position: fixed with the image set as its background, but you would probably need to make some changes to the theme files (through a child theme) to get that working.

    — Anders

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Background image with infinite scroll in iOS 13.3’ is closed to new replies.