Use unitless line-heights for font-size variables #15216
Merged
Conversation
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
philipp-spiess
approved these changes
Nov 27, 2024
adamwathan
deleted the
fix/use-unitless-line-heights-for-font-size-variables
branch
Contributor
|
👋 Nice! Just out of curiosity, why were some line heights unitless and others |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Safari has an insane bug where if you register custom properties for gradient colors using the
"<color>"type, you attempt to transition a gradient on an element, and you set a font-size and line-height on that element that point to CSS variables defined usingremunits, the element size changes and shifts the layout while the transition is happening:Untitled.mov
This bug goes away if you use anything other than
remunits for the line-height. So this PR changes all of our variables like--text-3xl--line-heightto use unitless relative line-height values instead of fixed line-height values to workaround this bug. Not my favorite change but pretty low impact because you likely aren't going to reference those variables for much anyways.If Safari ever fixes this bug (which is still present as of Safari 18), it would be nice to swap these back to what they were.
Fixes #15196.