Mobile Parallax On Setting

  • Resolved MHJP

    (@mhjp)


    6 years ago

    After testing this feature, two questions regarding the Mobile Parallax Off/On setting:

    1. When I check the box that turns the parallax effect ON, the picture “size” changes on mobile devices but there doesn’t seem to be a real parallax effect on the additional panel sections. Is there anything else that requires setting?

    2. When the parallax effect is turned ON, the featured images look fine on Android phones, but on iPhones it appears that the featured images on the additional panel sections are no longer responsive. They look all blurry because they are so big. Some special setting for iPhones?

    Appreciate your help. Thanks, Mike

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    Hi Mike,

    You have spotted something that we are aware of and have not yet decided what to do about! :-p

    It would appear that iOS blocks the CSS attribute …

    background-attachment: fixed

    … because …

    Fixed-backgrounds have huge repaint cost and decimate scrolling performance.

    It may not be possible to get around this but we are looking into it.

    @ianerickson originally requested this option so he’ll want to know about this.

    Kind regards,

    Oliver

    Thread Starter MHJP

    (@mhjp)

    Thanks for the quick reply Oliver. So the two issues are related… no parallax effect and non-responsive iPhone photos? The parallax also doesn’t seem to work on Android for the additional front page panels even though the photos themselves look fine.

    Plugin Author Oliver Campion

    (@domainsupport)

    Yes, iOS and Android disable the background-attachment issues differently, iOS appears to also mess up the “background-size: cover” property whereas Android doesn’t.

    I’ve now finished looking into a possible work around which was to use jQuery to change the background-image to a fixed position HTML img entity. Sadly this doesn’t work as all images are placed in the same space as the header image and the images are all on top of one another.

    So what about detecting devices that block “background-attachment: fixed” and return to non-parallax. Unfortunately this also is not possible as mobile browsers pretend that they do support this property.

    Sooooooo I’m afraid we are left with only one course of action which is to remove this option altogether and revert to the theme’s default action which is to only show the parallax for browsers over 768px wide.

    Unless anyone else has any ideas … ?

    Oliver

    Thread Starter MHJP

    (@mhjp)

    Thanks for investigating. It’s a different theme, so probably apples to oranges, but perhaps you can glean some ideas from the active Squarespace site: https://www.lisatraina.com where the parallax words on iOS okay?

    mike

    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Mike,

    This is pretty cool because it’s “true” parallax in that the background image moves slightly when the user scrolls.

    Sorry, got side tracked, haha!

    Anyway, from a quick inspection it looks like this is done with an actual img element and some JavaScript … so unfortunately, this may well be outside of the scope of Twenty Seventeen … but I’m not 100% ruling it out for the future ??

    So … for the meantime I’ve just pushed an update for the plugin without this option … sorry!

    Kind regards,

    Oliver

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile Parallax On Setting’ is closed to new replies.