Keep the draw tiles whole under a host's CSS reset - #11
Merged
Conversation
Each tile holds the whole picture, sized to the grid and shifted so that
the tile's own share of it shows through. That means an image several
times wider than the box it sits in - which nearly every reset forbids:
Tailwind's preflight, normalize.css and the rest all ship
`img { max-width: 100% }`.
Clamped by one of those, the image is squeezed into a single tile. The
first column still draws something, wrongly scaled; every tile past it
offsets that narrow image clean out of its own box and draws nothing at
all. The picture then appears in one go when the seamless copy lands,
which reads as the transition animating a single column and then giving
up.
`max-width: none` and `max-height: none` on the tile's image, rather
than hoping the host has not set a reset.
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.
The
drawtransition was broken on any site with a CSS reset — which is most of them.What happened
Each tile holds the whole picture, sized to the grid (
width: calc(var(--lb-cols) * 100%)) and shifted byleft: calc(var(--c) * -100%)so the tile's own share shows through itsoverflow: hidden. That means an image several times wider than the box it sits in.Nearly every reset forbids exactly that: Tailwind's preflight, normalize.css and the rest all carry
img { max-width: 100% }. Clamped by one, the image is squeezed into a single tile, so:object-fit: coveron a now tile-shaped box shows the middle of the photograph rather than that tile's slice;Which reads as "the transition animates one column and then the image just appears". Found on a Tailwind site.
The fix
max-width: noneandmax-height: noneon the tile's image, rather than hoping the host has not set a reset.Test
tiles survive a host stylesheet that clamps imagesinjectsimg { max-width: 100% }, opens a draw transition and asserts a tile's image still spans the whole grid rather than one tile. On the old CSS it measures 164px against an expected 820px — one fifth, the default five-column grid — so it is genuinely guarding the thing. 52 unit and 10 browser tests pass.