[Support request] Parallax images not showing on tablet

[Sarina]

The two parallax images on the home page are not rendering correcting on ipad. They look ok on mobile and desktop. Is there any setting I should tweak?

I found on a google search that this is a common issue. Is there a workaround?

[Sarina]

I mean common issue with iphone and ipad : https://stackoverflow.com/questions/54518250/parallax-background-image-is-not-display-on-iphone-but-it-is-display-on-android
Bur for me iphone is fine.

[Sarina]

A solution like this for your theme : https://theme.co/forum/t/fix-for-parallax-issue-on-ipads/17540

[Fernando]

Hi Sarina,

Yes, apple devices seem to have issues with fixed backgrounds. As far as I know, there’s no workaround yet CSS-wise.

The link you provided is a fix in the sense that it no longer sets the background to “parallax”. It just reverts to normal behavior.

The code for that relevant to the Block you used is this:

@media (min-width: 769px) and (max-width: 1024px) {
    .wp-block-cover.is-light.has-parallax > .wp-block-cover__image-background.has-parallax {
        background-attachment: scroll !important;
        background-size: cover;
        height: 100%;
        overflow: hidden;
    }
}

This will work on all tablet devices though.

[Sarina]

ok,thanks

[Fernando]

You’re welcome, Sarina!

[Author]

Posts