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

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

Home Forums Support Safari (ipad and iphone) renders background images incorrectly

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #606416
    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #606463
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #607638
    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

    #607722
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #607911
    Simon

    Yes, parallax is turned off.

    Regards
    Simon

    #607925
    David
    Staff
    Customer Support

    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.

    #608453
    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

    #608551
    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

    #608640
    David
    Staff
    Customer Support

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.