[Resolved] Safari (ipad and iphone) renders background images incorrectly

[Simon]

Hi,

The website in question is 8count.co.nz You will see on the homepage I have two pictures at the bottom with parallax effect (txt rolling over them). The are fixed with a little css

.fixed_background_section{
background-attachment:fixed;
background-size:cover;
background-position:bottom

On a desktop and mobile it renders as it should but on iPad and iPhone using safari the images are large fixed and do not have the parallax effect.

Can you please suggest how I might correct this.

Kind regards
Simon

[Leo]

Hi there,

Not quite sure what you mean.

Don’t think background-attachment: fixed; should used with parallax enabled.

It should be one or another.

Let me know 🙂

[Simon]

Hi Leo

Much thanks for your reply.

My original query was a little ambiguous, apologies for this; the problem is that background-attachment: fixed does not seem to work on apple mobile devices using Safari.

Unfortunately turning Parallax on or off does not make a difference. It seems that background-attachment: fixed does not work with Safari on an iPad? I am hunting down an iMac to see if the problem is also on that device (ie which Safari editions).

Could you please check the homepage 8count.nz in Firefox then on an iPad and you will see the difference.

Much thanks for your time
Simon Lowther

[Leo]

Can you turn parallax off so I can see? Make sure to clear your caching plugins or turn it off for now as well.

Let me know 🙂

[Simon]

Yes, parallax is turned off.

Regards
Simon

[David]

Hi Simon,

fixed background is disabled on iOS browsers due to the heigh repaint cost. Have you tried just the Parallax Effect in the section without the CSS? This should work, let me know.

[Simon]

Thanks David;

I thought that this might be the case and have found a couple of work around but are thinking that iPhone users will just need to suck it up (adds to my despise of Apple ;-)).

Cheers
Si

[Simon]

Hi

For any one else having this problem (and I see there are lots with all themes) a possible solution that I am working on is to…

1) Add a js to the footer hook to sniff out iPads then add a css class is an iPad is detected using userAgent.match
2) Add simple css to replace the fixed background with another image

Just thought I would add to help others
Si

[David]

Hi Simon, To note: the Parallax option in GP Sections does work on iOS, just a lot more sublte than a fixed background image. glad you found a solution that works for you.

[Author]

Posts