Package: @wix/interact/web
Description
The <interact-element> custom element as an unknown HTML element, browsers render it as display: inline, which breaks CSS grid placement when <interact-element> wraps a grid item.
This can be experienced specifically when adding interact programmatically to existing grid layouts with existing CSS rules.
Steps to reproduce
- Create a CSS grid container
- Place grid items inside with
grid-column / grid-row placement rules specific to them
- Wrap one or more items in
<interact-element data-interact-key="...">
- Observe that the wrapped items lose their grid placement and collapse to the top-left
Expected behavior
<interact-element> should be layout-transparent. Wrapping an element should not affect how it participates in its parent's layout context.
Workaround
Adding interact-element { display: contents } to the consuming application's CSS resolves the issue by making the wrapper invisible to the layout engine.
Suggested fix
Register a default style for the <interact-element> custom element
Package:
@wix/interact/webDescription
The
<interact-element>custom element as an unknown HTML element, browsers render it asdisplay: inline, which breaks CSS grid placement when<interact-element>wraps a grid item.This can be experienced specifically when adding interact programmatically to existing grid layouts with existing CSS rules.
Steps to reproduce
grid-column/grid-rowplacement rules specific to them<interact-element data-interact-key="...">Expected behavior
<interact-element>should be layout-transparent. Wrapping an element should not affect how it participates in its parent's layout context.Workaround
Adding
interact-element { display: contents }to the consuming application's CSS resolves the issue by making the wrapper invisible to the layout engine.Suggested fix
Register a default style for the
<interact-element>custom element