fix(dom): stop pseudoClassEnabledElements from freezing layout + settle transitions (PER-9836)#2331
Open
Sriram567 wants to merge 1 commit into
Open
fix(dom): stop pseudoClassEnabledElements from freezing layout + settle transitions (PER-9836)#2331Sriram567 wants to merge 1 commit into
Sriram567 wants to merge 1 commit into
Conversation
…le transitions (PER-9836) serializePseudoClasses bakes an opted-in element's computed style as an inline `!important` block so the forced :hover/:active appearance survives serialization. Two problems fell out of baking the FULL computed style, captured once at the SDK viewport at serialize time: 1. Layout/box-model props (width/height/padding/margin/inset/flex/grid/ display/…) were baked `!important`, freezing the SDK-viewport geometry and overriding the page's responsive rules at every OTHER Percy render width. PER-9836: a CTA anchor baked `width: 134px !important` rendered content-width at Percy's 375px width instead of the site's mobile full-width. Fix: NON_BAKED_STYLE_PROPS excludes sizing/spacing/ positioning/flex/grid/transition props from the bake; layout stays governed by the page's own (separately serialized) stylesheets. 2. The bake read getComputedStyle mid CSS-transition (the SDK forces :hover then serializes immediately), so a half-faded colour was frozen instead of the settled hover colour. Fix: computedStyleTextSettled disables the element's `transition` before reading computed style and restores it in a `finally`, so the baked value is the settled state. Only paint/state props are baked now; responsive layout and the final forced-state colours both render correctly. Adds regression tests for the excluded-property set and the transition-settle/restore behaviour. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why (PER-9836)
pseudoClassEnabledElementsbakes an opted-in element's computed style as an inline!importantblock so a forced:hover/:activeappearance survives serialization. Baking the full computed style — captured once at the SDK viewport, at serialize time — caused two customer-reported regressions:width,height,padding,margin,inset,flex,grid,display, …) were baked!important, freezing the SDK-viewport geometry and overriding the page's responsive rules at every other Percy render width. A CTA anchor bakedwidth: 134px !important(its 1280 content-width) rendered content-width at Percy's 375px width instead of the site's mobile full-width.:hoverthen serializes immediately, sogetComputedStyleread a half-faded colour (the rest→hover transition frame) and baked it — the button showed a wrong hover colour.Fix
NON_BAKED_STYLE_PROPS— exclude layout/box-model/positioning/flex/grid +transition*props from the baked block. Only the paint delta of the forced state is baked; layout stays governed by the page's own (separately serialized) stylesheets, which re-evaluate media queries per render width.computedStyleTextSettled— disable the element'stransitionbefore readinggetComputedStyleand restore it in afinally, so the baked value is the settled forced-state colour, not a mid-transition frame. The live page (SDK mode) is left untouched.Scope is limited to the
pseudoClassEnabledElementsbake path — no other behavior changes.Verification
@percy/domsuite green (added 2 regression tests: excluded-property set; transition disable-during-read/restore-after).width/height/padding/display;background-coloris now the settled hover colour.Fixes PER-9836.
🤖 Generated with Claude Code