Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

background-attachment: fixed – glitchy on Safari?

  • Joel
    September 26, 2024 at 1:45 am

    Hello,

    I’ve noticed recently that fixed backgrounds can be a bit glitchy/laggy on Mac OS Safari. For example, see the starter site – https://gpsites.co/sweet/ – the fixed background is fine on Chrome but on Safari it jumps around a bit (I’ve tried a couple of different Macs with different OS versions so I don’t think it’s specific to my Mac).

    Just wondering whether you have any suggestions / CSS snippets to improve performance on Safari?

    Many thanks,

    Joel

  • David
    September 26, 2024 at 3:28 am

    Hi there,

    fixed attachment backgrounds are really processor intensive, and Safari just sucks at handling them, to the point where it feels like its actively protesting against there use lol

    I am quite surprised the designer choose that layout for the sweet site…

    The best way to get around it is to not use background-attachment: fixed;
    Instead you would need to position: fixed; a Contaienr with a regular attached background image applied to it.

    E.g

    
Container Block #1 ( Parent )
---- Container Block #2 ( Background Image )
---- Container Block #3 ( Content )

    The Container Block #2 should have no content inside it.
    Just add the Background Image and leave its attachment as default.
    Then create a Global Style for the Container Block, and set its Layout > Position to Fixed and its Inset ( Top, Right, Bottom, Left ) all to 0

    You may need to tweak Z-Indexing and ensure any subsequent containers on the page have a solid background as that fixed container will always behind them

  • Joel
    September 26, 2024 at 4:48 am

    Thanks, yes that looks much smoother…I guess the tricky thing will be keeping on top of the z-index values of the other containers!

    Thanks for your help.

  • David
    September 26, 2024 at 5:42 am

    Glad to hear that !

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