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

d19dotca · July 24, 2021, 6:21pm

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

luistinygod · July 26, 2021, 4:31pm

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:

d19dotca · July 26, 2021, 5:25pm

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

luistinygod · July 26, 2021, 5:31pm

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

Lee · March 22, 2022, 2:34am

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

luistinygod · April 13, 2022, 4:16pm

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.

robin · April 19, 2022, 9:18pm

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

d19dotca · May 15, 2022, 7:00pm

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).