Fix "Read more" overlapping the last visible line on mobile Safari - #1739
Merged
Merged
Conversation
The Expandable component aligned the clip height to the bottom of text rects and then subtracted 4px on Safari. Modern WebKit reports tight text rects, so that hack always cut the bottom of the last visible line and the "Read more" button looked like it overlapped the text on mobile. Now the clip snaps to the boundary between two adjacent lines: the middle of their overlap (when rects are taller than the line box), or the bottom of the upper line (when there is a gap). This works regardless of the engine or font metrics, so the Safari UA sniffing is removed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- Cut the folded text at the bottom of the line box, not of the glyph rect: extend text rects by the half-leading computed from line-height (not less than the containing block's one, for inline code etc.). The gap between the last visible line and "Read more" now equals the gap between text lines. - Make the clipped container a BFC (display: flow-root). 'overflow: clip' doesn't create one, so in Safari the bottom margin of the hidden .post-text leaked out and pushed the button 8px down. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <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
2 participants
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.
Фикс бесячего read more на айфоне - картинки было-стало + клодово описание
On iOS Safari the folded post/comment text was clipped a few pixels too short: the bottom of the last visible line (descenders) was cut off, and "Read more" looked like it was overlapping the text.
Causes
-4pxSafari hack inExpandable. The clip height was aligned to the bottom of text rects and then reduced by 4px on Safari (UA sniffing). Modern WebKit reports tight text rects, so this always cut into the last visible line.overflow: clipdoesn't create a BFC. In Safari the bottom margin of the hidden.post-textleaked out of the clipped container and pushed "Read more" 8px down on posts.Changes
align()now snaps to the bottom of the closest line box: text rects are extended by the half-leading computed fromline-height(not less than the containing block's, for inlinecodeetc.). Works regardless of engine/font metrics, so the Safari UA sniffing is removed..clippedContentgetsdisplay: flow-root.Result
Measured on a 375px viewport (WebKit with iPhone emulation, and Chromium), on freefeed.net/freefeed and on local posts:
No line crosses the clip edge in any of the 22 folded blocks on freefeed.net/freefeed, also with a stress test (
line-height: 0.95, i.e. text rects taller than line boxes). Expanding works as before.🤖 Generated with Claude Code