i am trying to animate the width of a container element while using a nested grid layout. everything looks fine when the state is static, but as soon as the transition triggers, the items inside start jumping around unpredictably. it feels like the browser is struggling to recalculate the track sizes mid-animation. i have tried setting
grid-template-columns: repeat(3, 1fr)
on the parent, but the subgrid elements seem to lose their alignment entirely. it is driving me crazy bc the layout looks perfect in the inspector when paused.
the weird part>everything works until you add a transition propertyi even tried switching to
display: flex
as a fallback to see if it was a grid-specific issue, but the jumpiness persists. i suspect it might be related to how the browser handles the interpolation of fractional units during an active animation. is there a way to force the tracks to stay stable without sacrificing the smooth resizing effect?
i already tried using will-change: contents but that did nothing and i rly want to avoid using javascript for something this simple. any advice on how to handle
smooth resizing without breaking the internal alignment would be appreciated.