Repository navigation
Conversation
Every node matched against a stylesheet with @media blocks re-evaluated each query: it read the screen size natively and re-parsed the query string. Results are now cached per query string. The cache is cleared where its inputs change (orientation, system appearance, and the first window's traits), before CSS is re-applied, and a cache epoch lets callers that derive data from query results notice the change.
|
View your CI Pipeline Execution ↗ for commit ef2411b
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
commit: |
… changes The screen size can change without an orientation or appearance change (a foldable's display, a window moved to another screen), which left views created afterwards matching against the old size. The cache now compares the screen size once per turn and invalidates when it differs.
|
@triniwiz I pushed ef2411b on top of this branch. Here's the review finding it addresses, confirmed on an iPhone Duo simulator. Gap: the cache was only invalidated on orientation and appearance changes. The screen size can change without either. Views created afterwards then matched Device check (iPhone Duo simulator in Bitrig): a toolbox probe page created a fresh
Fix: Note: #11506 is stacked on the earlier commit of this branch and will need a rebase. |
This branch has not been deployed
2 participants
PR Checklist
What is the current behavior?
CSS matching evaluates every
@mediablock for every view it matches. Each evaluation readsScreen.mainScreenwidth and height (on iOS, two native reads each), fetches the application orientation and appearance, and re-parses the query string. A stylesheet with media queries pays that once per view per query on every mount and restyle.What is the new behavior?
Results are cached per query string. The inputs only change through the application, so the cache is cleared there, before CSS is re-applied:
setOrientation(which also refreshes screen metrics)setSystemAppearancesyncTraitsFromWindow, which seeds the first window's traits without going through the settersClearing from event listeners would be too late: the application re-applies CSS before it raises
orientationChangedandsystemAppearanceChanged.matchMedia()andMediaQueryListchange events still evaluate their query directly. A cache epoch (getMediaQueryEpoch) lets other caches derived from query results notice a change; #11506 uses it.The benchmark stylesheets have no
@mediarules, so this has no effect on the numbers in #11506, #11507 and #11510. The new spec shows the screen is read once per query until the cache is invalidated.Part of a series: #11505 (this), #11506 (stacked on this one), #11507, #11510.