Browser: Chrome 110 OS: macOS URL: Link to a page that illustrates this issue Video: Short screen recording that illustrates this issue (free tool: jam.dev)
After updating to version 1.12.2, my gradients are broken on the frontend, although they look fine in the backend. I’m using external CSS loading. I tried switching to inline CSS, but the problem remained. I also regenerated the external stylesheet, but that didn’t help either. I found that changing the z-index property from -1 to any other value fixes the gradient. Please see the attached video for a demonstration.
yep, we changed how the overlay is applied in the latest version. In general, we added z-index:-1 to the :before and isolation:isolate to the element where you set the overlay (to create new stacking context).
I can’t reproduce the issue locally. Can you share a link to your website, so I can check?
I confirm i got the exact same problem with the last update. Gradian i put on image have go missing on plain image, but was still partialy visible if the image have transparency. So basicaly they are display with lower z-index that the image itself or something like that.
Only solution i found was to donwgrade to the 1.12.1 version.
thank you both. With the hint of @Iznogood, I was able to locate the isse. This is happening, if you add an overlay over the image element. I’ve created internal task for this.
For example, adding overlays over the Block element, with a background-image still works as expected.
As a workaround, you have a few options:
You can unset the z-index on ::before pseudo-class, on the single image element
%root%::before{
z-index: unset;
}
You can unset the z-index on ::before pseudo-class, on all image elements. But you have to be careful, as this may mess with other settings, if you use ::before on image elements.
.brxe-image::before {
z-index: unset;
}
You can temporarily downgrade to the 1.12.1 version, until we fix this issue.
I had downgraded but reading this, i realized i was using an actual image as background image with z-index: -1 changing that to z-index: -2 solves the issue. But when using video backgrounds, the issue persists.
Same issue here. Is their plans to roll out a fix? Or should I adjust the z-index on my site now? I just dont want to have to undo everything if bricks will roll out a fix.
thank you for this info. Can you share a link to your website, where you have this video background, so I can see how you set it up, and why -2 is not working in your case?
I have just figured out, that all clients updated sites are broken because of this new behavior. Hope this will be fixed. I am not sure, why updates like this comes. Because they just broke working things. Do you plan to revert this, or I need to manually go over 40+ websites and check every image and gradients…?
That will hurt, did you have all those sites on auto-update? If yes, i never enable auto update for themes or plugins that have direct impact on the frontend appearance of a site.
