Repository navigation
Keep the T's curl while the name fades in (Safari) - #343
Merged
Merged
Conversation
Cinzel Decorative's T curls 0.09em left of its box. While the name fades in, Safari draws it on a layer cropped to the heading's box, so the T showed without its curl until the animation ended. The box now reaches over the curl (padding), and a matching negative margin keeps the text in place. Same for the name in the navigation.
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
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.
Cinzel Decorative's T curls 0.09em (7px at 80px) left of its box; no other letter does. While the name fades in, Safari draws it on a layer cropped to the heading's box, so on desktop, where the name is left-aligned, the T showed without its curl until the animation ended. Phones were not affected: the name is centred there, the curl inside the box.
The box now reaches over the curl (
padding-left: 0.1em) and a matching negative margin keeps the text exactly where it was. Same for the name in the navigation.Reproduced on real page loads in WebKit: before, the T loses its curl for the first ~500 ms; after, the curl is there from the first frame. Chromium was never affected. 20 tests pass, Lighthouse included.