Anyone else have a problem with repeater opacity?

@roni-fialkow Hi, Roni. Thanks for introducing yourself.

You might be interested in a problem I just encountered with a repeater – the opacity setting won’t work.

Here’s the situation: I’ve got a section with a 100% black background, a stretched image that fills the entire section and is set to ‘reveal’. The image has an opacity setting of 60%, so it’s dimmed by the black background.

I’ve put laid out multiple containers down the section, using white text and white SVG elements. I’ve set the containers to a black background with 60% opacity so that the text stands out, but the image is still visible beneath the container.

I tried to do the same thing using a repeater. Each item contained a white text element and a white SVG graphic element. I set the repeater background to black at 60% opacity.

The repeater looked fine in the editor and it looked fine in preview, but when I published, the background color was gone. It was as though the opacity was set to 0.

I fussed with it a bit, in case it was a one-time glitch – changing and resetting the opacity – but no luck.

I finally put the repeater in a container and set the container background appropriately. That workaround is fine, but I thought you might want to be aware of the glitch. Was that a one-time thing or can it be replicated? I needed to move on, and I had a workaround, so I didn’t spend a lot of time trying make it work.

1 Like

Hey @jim75924 thanks for reporting this issue. We passed your feedback back to the team.

It seems that the correct value for opacity setting is rendered in the published site but not in the Editor or in the Previewed site for repeaters. In the Editor and in Preview it looks a bit darker in a Repeater (compared to opacity in a regular container).

A possible workaround you can try is to just use the values in the repeater that you want for the published site. For comparison, you can use a regular container to test which values you should use since containers look correct.

I hope this helps.

@carmelsc Thanks for passing this along. However, the problem I’m seeing is exactly the opposite of what you report. For me, the opacity looks fine in the Editor and in Preview, but it is completely missing in the Published version. The published version is completely clear, as though opacity was zero.

As a workaround, I’m putting the Repeater into a Container and setting the opacity in the Container instead, which works fine.

I’ve created an example to show what’s happening for me. At the top, you see how the repeater opacity appears in the Editor (it looks the same in Preview). At the bottom, you see that the color completely disappears when the site is published. Hmmm. I see that the outline disappeared, too.

I am having the same issue with repeaters. Opacity is set to 0 and works accordingly on preview mode but on the live site, it shows the color.

EditorX Preview

Live Site

When I look into developer tools, I see the color is coming from this class

._3Fes4 {
    --container-corvid-background-color: rgba(var(--bg,var(--color_11)),var(--alpha-        bg,1));

But as shown below, the repeater background opacity is set to 0. However, the color box next to it does not change its opacity like it does for other elements, so I think this is a bug?

I meet the same problem with the opacity of repeater !? Is this problem still not solved ?

In my Editor looks good : (opacity at 0%)

In the published site, not !? : (a white background appear)

Is there any solutions for that ?

Thanks a lot


hi, Seb
don’t you mind to share the site link with us, we will be glad to assist you, but we may need to see the live site.


Hi, Thanks for reply.

Of course :

I find a solution with puting my repeater into a box/container. Repeater opacity set to 0% and container opacity set to 0%. And the published site is OK.

But the repeater (in pink color for my example) which is NOT into a box/container, even with an opacity set to 0%, looks not weel on the published site. A white background appear !?

Thanks again,