Browser: Chrome 110
OS: macOS
Video: https://youtu.be/3sqxzOkafuU
I created a component containing a video element. The video’s overlay background image is connected to an image property on the component.
The issue occurs when I place multiple instances of this component on the same page. Each instance has a different video and overlay image selected, but both video overlays display the same image.
Steps to reproduce:
- Create a component containing a video element.
- Add an image property on the component.
- Connect that image property to the video element’s overlay background image.
- Add two instances of the component to the same page.
- Assign a different overlay image to each instance.
- View the page on the frontend.
Expected behavior: Each component instance should display the overlay image selected for that specific instance.
Actual behavior: Both video overlays display the same image, even though different images are selected in the component settings.
It appears that Bricks generates the background-image declarations using the shared class of the element inside the component. Because every component instance uses the same class, Bricks outputs multiple conflicting CSS rules with identical selectors. The rule that wins in the cascade is then applied to every instance.
Please let me know if there is a workaround for this issue or if you need any additional information.
Thank you,
Aaron