NO BUG: Media Query “prefers-reduced-motion” needs “!important” for styles to work

Bugs
1

Browser: Chrome 110
OS: macOS
URL: Animation test – Blueprint
Video: Media Query “prefers-reduced-motion” - Bricks builder | Loom

I’m not sure why this happens, but I’ve noticed that if you want to change an animation in the “prefers-reduced-motion” media query, you absolutely need to use !important for it to work.

.icon__wrapper {
    animation: rotate-in-center 0.6s linear infinite;
    background-color: coral;

    @media (prefers-reduced-motion) {
        background-color: yellow;
        animation: rotate-in-center 5s linear infinite !important;
    }
}

I’ve tested this outside of Bricks in an HTML and CSS editor like CodePen or Codi.link, and there’s no need to use !important there. So, I’m really not sure what causes this or what configuration might be responsible.

This only applies to animation properties, but for others like background-color, it’s not necessary. So, it’s a bit confusing and inconvenient to have to use !important.

2

Lots of !important rules in the stylesheet

SCR-20250123-outy
SCR-20250123-outy2512×2287 450 KB

1 Like
3

Hi @Smith_Benites,

most likely, the issue is what @wplit answered (thanks!), so you should contact ACSS if there is an option to remove those important statements, or just use them, if it’s not.

I’ll mark this topic as no-bug :slight_smile:
Matej

1 Like
4

thanks!
It’s really completely my fault for not thinking about ACSS that I might be interfering… :man_facepalming:t2: