WIP: When refreshing front-end page in Safari browser, flashes black & white for a moment before loading properly

Bricks Version: 1.3.2
Browser: Safari 15.0
OS: macOS 12.0
URL: https://www.staging.cle.bricks.d19.ca/

I’m currently staging a new client website that I originally built in Elementor elsewhere, and am trying to recreate it slowly in Bricks. Unfortunately, I see this weird bug where when visiting the frontend of the website using Safari (iOS and macOS but more noticeable in macOS/desktop view), the page flashes black & white for a moment before revealing all the proper colours.

It’s very strange and I can’t quite narrow it down, but I had the same thing on another site I was rebuilding in Bricks Builder too so that’s what makes me think this is more of a Bricks thing then a Safari thing since I don’t see this issue with any sites I’ve built in Elementor for example, though I know Safari can be a bit temperamental too so maybe it’s a mix of both.

I’m not sure what the root cause is, and I’ve tried to narrow it down a bit by excluding caching issues (i.e. had WP Rocket enabled, removed that plugin but still see the issues), actually ended up disabling all plugins entirely but issue was still present.

Please review the video I took of the issue: https://files.d19.ca/Bricks%20Builder/Bricks%20Builder%20Safari%20flashing%20black%20and%20white%20refresh.mov

Hello @d19dotca

Did you try to disable the Bricks Lazy Loading mechanism and see if it gets better?

You’ll find this at Bricks > Settings > Performance:

1 Like

@luistinygod - You’re a genius! That worked, thank you so much! :slight_smile:

We’re investigating why in certain scenarios the Bricks Lazy Loading causes these flashes.

1 Like

Hi @luistinygod , I just want to ask if this problem is solved? I have the same problem with BRICKS THEME (1.3.7).

1 Like

Hello @Lee

We’ve made several improvements in Bricks 1.4 (beta), but overall, if you still see the flashes in Bricks 1.3.7 try to disable Lazy Loading from Bricks > Settings > Performance.


I’ve had the same issue when testing 1.4 beta, in Chrome. The issue is resolved when disabling lazy loading like suggested.

I suppose in an ideal world for a better user experience, Bricks would automatically disable its own Lazy Loading functionality (and be uneditable in the GUI while showing it disabled) when it detects WP Rocket’s lazy loading functionality enabled (and other common performance-based plugins too).