Streaming live at 10am (PST)

Rendering issue in Safari with the blur effect

Hi webflowers! :slight_smile:

I have designed a website with a blurry div that follows the arrow. It has worked fine the last couple of days, but all of a sudden the page shows a white square on load when using safari. Sometimes it does not appear on first page load, but if you refresh it will show. The square however disappears when the site is scrolled, which is also weird. Please see image attached.

Do any of you know how to make the white square disappear. All help is much appreciated. I have inserted a read only link below.


Here is my site Read-Only:

https://preview.webflow.com/preview/ubiqisense?utm_medium=preview_link&utm_source=designer&utm_content=ubiqisense&preview=9d582bb28e384a0ef12eb07cd841230a&workflow=preview&fbclid=IwAR0zNW_0X1FGHth4P5eq0eV722HLUp1_QNnpJlj9-SJcpeyvN13uBajZiIg

Hey @Tobias_Hinke

Some things I noticed :thinking:

  • The square is the same size as the cursor div before the blur is applied.
  • The square disappears after starting to scroll, about where the nav’s button reaches the top of the viewport.

Unless there is a scroll interaction causing interference, I suspected that there was a Safari bug affecting the blur filter. I was right after a quick internet search.

Applying overflow: hidden to the cursor div does the trick for me. See if that works for you too and let me know.

Cheers
—Matthew

2 Likes

Thank you so much @matthewpmunger!

It did the trick! :slight_smile:

2 Likes

:raised_hands: Great news! Glad to hear it.

1 Like