WAIT: Default :where(.brxe-image) img rule missing when block is used as Component

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.

When a block containing an Image element is inserted as a Component, the default Bricks rule:

:where(.brxe-image) img { height: 100%; width: 100%; … }

is not generated into the page’s dynamic CSS. As a result, falls back to height: auto, and object-fit: cover has no effect — images used as positioned/cover backgrounds overflow their container.

Steps to reproduce:

  1. Build a Section with a Container (position: relative) and a Bricks Image element inside (position: absolute; inset: 0; object-fit: cover).
  2. Save as Component.
  3. Insert the Component on another page → image overflows.
  4. Same block used directly (not as Component) → works correctly.

Verification (browser console on the affected page):

javascript[…document.styleSheets].some(s => { try { return […s.cssRules].some(r => r.selectorText?.includes(‘:where(.brxe-image)’)); } catch { return false; } })

Returns false on Component-based pages, true on direct-use pages.

Workaround: add .brxe-image img { width: 100%; height: 100%; } to global CSS.

2

Update: This is not limited to Image elements. The same issue occurs with Text Link elements — the default :where(.brxe-text-link) { display: flex } rule (or similar) is also missing when the element is used inside a Component, causing icon/text layout to break (icon position, gap, alignment all lost). This appears to be a general issue with Bricks default element CSS not being generated for Component-based content.

3

Hi Daniel,
Thanks so much for your report!

However, I can’t reproduce the issue when I follow the steps you mentioned.
Could you please record a screencast showing all the necessary steps and provide a link where we can see the problem? Feel free to use try.bricksbuilder.io if you don’t have a suitable live site.

Best regards,
timmse

4

Hi @timmse ,

Thank you for your reply.

Important update: This issue only manifests on installations using Automatic.css (or any framework that sets img { height: auto; max-width: 100% } globally). On a clean Bricks-only install (e.g. try.bricksbuilder.io), the bug does not reproduce because there is no competing rule overriding the image height.

However, the underlying behavior is still concerning: the Bricks default :where(.brxe-image) img rule is missing in the dynamic CSS on Component-based pages, even though it is present on pages where the same block is used directly. This default rule normally provides height: 100%; width: 100% as a safety net, and its absence in Component contexts breaks layouts whenever any other CSS (framework, theme, or custom) overrides the img defaults.

The same is true for the :where(.brxe-text-link) default — its absence causes display: flex, gap, and align-items to be lost on text links inside Components.
Steps to reproduce on a Bricks + ACSS install:

  1. Build a block with an Image element positioned absolutely as a background, save as Component.
  2. Insert on a different page.
  3. Image overflows because height: 100% from Bricks defaults is missing, and ACSS height: auto takes over.
5

Hi Daniel,
I’m sorry, but I still can’t reproduce the issue, so I’d like to ask again for a screencast showing all your steps and the problem, as well as to export your component.

6

Hi @timmse ,

I’ve made a screencast. I’m trying to demonstrate that if I don’t add the custom CSS code under Custom CSS, the image with absolute positioning doesn’t align to its relative parent — it fills the entire screen. Also, the icon order in the Text Link element isn’t correct either without the custom CSS code.

If I export the component, how can I send it to you?

7

I’m still confused… I still don’t quite understand what this is all about, or how I can reproduce it as the video doesn’t contain replication steps :smiley:

Edit: what if you just set the relative wrapper to overflow: hidden? Otherwise it’s kind of expected that the absolute image overflows… :thinking:

You can just paste the json code here, or put the exported file in dropbox, gdrive or similar.

8

Hi,

Problem 1 — Image element used as absolute-positioned background

Build a block where an Image element is positioned with position: absolute; inset: 0; object-fit: cover to act as a background.

  • Used directly on a page: image fills the parent container correctly.

  • Saved as Component and inserted on another page: image overflows and renders at its intrinsic aspect ratio.

Cause: the Bricks default rule :where(.brxe-image) img { height: 100%; width: 100% } is not present in the dynamic CSS on Component-based pages. ACSS’s img { height: auto; max-width: 100% } then takes effect, the image gets its natural height, and object-fit: cover has nothing to “cover” against.

Fix that resolved it:

.brxe-image img { width: 100%; height: 100%; }

Problem 2 — Text Link element with icon

A Text Link element configured with an icon on the right side and a gap between icon and text.

  • Used directly: icon renders on the right, with proper gap and vertical alignment.

  • Saved as Component and inserted on another page: icon renders on the left, with no gap, no vertical centering.

Cause: the link’s computed display is block instead of flex on the Component-based page. The flex-direction: row-reverse, gap, and align-items properties are still set, but they have no effect because the element is not a flex container. The Bricks default rule that establishes display: flex on .brxe-text-link is missing from the dynamic CSS.

Fix that resolved it:

.brxe-text-link { display: inline-flex; align-items: center; }

Here is the Component JSON file: bricks-component-dujkrq-for...