NO BUG: Background colour of block removed when transform defined

Bugs
1

Browser: Any
OS: Any

I have a number of cards on my site designed like this:

  • Relative positioned block with a semi-transparent dark background colour and any content centred in X and Y
  • A heading in the block
  • An image in the block set absolutely to cover the entire block and with a z-index of -1

The background colour displays on top of the image to darken it allowing the text to show better.

The problem is when I go and add a transform to the block e.g. scale in X and Y by 1 the background colour is removed both in the back and front ends. Is this a bug or css cannot handle background colours with transform?

If I create an overlay for the image or the block then this works fine.

Thanks.

2

Hey @simon.

Can you share a link to the page, where I can see the issue? Ideally, with two cards - one with transform applied and one with not.

Thank you.
Matej

3

Hi @Matej,

Here’s the link: Test overlay bug – Otter Vale Mission Community

The card on the left is correctly displayed with the semi-transparent block background colour over the image to darken it. The card on the right is a duplicate but with a transform of scaleX and Y of 1 applied and the background colour has gone.

The issue happens with all transforms.

Thanks,

Simon

4

From looking at that the background colour is still actually there, but the z-indexing isn’t putting the image at the bottom of the pile when transform is active. Not a solution, but a workaround would be to set the background colour of the div to var(–neutral) and set the opacity of the image to .5, which creates the same visual effect and works.

Again, though, band-aid not a fix.

5

Thanks. I tried this but settled for now on simply adding a gradient to the block which isn’t affected by the transform. I also tried putting the gradient on the image but this a) adds a figure tag to the DOM with a :before pseudo class for the gradient which I don’t want and b) also breaks the absolute position of the image as Bricks adds position: relative to the figure.

6

Hi @simon,

this is not really a Bricks bug, so I will mark this topic as no-bug. But, the issue is, that “transform” creates new stacking context, that affects how the background-image is rendered.

One solution is to set z-index:-1 to the image element inside the cart. Can you try that?

Best regards,
Matej

7

The image already has a z-index of -1 set as this was dropping the image behind the block so the background colour would appear on top of the image. Whatever I change the value to makes no difference.

I’ll set a gradient on the block instead.

8

Ah, yeah, I see. Silly me, I had “transform” disabled when I checked and I though it works :sweat_smile:

Try to add this CSS to the card element:

#brxe-wkfbdb::after{
  content: " ";
  background-color: var(--neutral-trans-50);
  position: absolute;
  top: 0;
  left:0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#brxe-wkfbdb{
  isolation: isolate;
}
9

Yep that works thanks

1 Like