"Blur gradients" appear with lines (Chrome)

Design help General
1

Without making any changes, about 2-3 weeks ago (roughly late October 2023) a few of the sites I created started showing banding on background gradients that use the “Blur” filter on a div with rounded corners and a background colour set. Some key points:

  • Removing these items fixes the bands
  • The bands show up on the published site and in the designer
  • The bands show up on mac and windows
  • The issue does not appear in Firefox

Preview of staging site: https://voteinformed.webflow.io/

Screenshots of the bands on 2 different sites:

image
image758×571 40.1 KB

image

Here is my site Read-Only: Webflow - Vote Informed!

2

Hey Matthew,

Use, transform: translateZ( 0); on all elements where you ar using the blur filter

3

Brilliant! This worked, but only when I set the z value to greater than 1. Not sure why this differs from your solution, but, either way, thank you!