Fix: Blocks of multi-line inline elements are too large#18
Merged
canalun merged 2 commits intocanalun:mainfrom Jul 30, 2024
Merged
Fix: Blocks of multi-line inline elements are too large#18canalun merged 2 commits intocanalun:mainfrom
canalun merged 2 commits intocanalun:mainfrom
Conversation
Problem ==== Blocks of multi-line inline elements can be broken even if they don't look collided with the ball in some cases. Cause ---- This is because the blocks of elements are created from the rectangles returned by `getBoundingClientRect`, which returns only one rectangle from an element. `getBoundingClientRect` doesn't have a problem with most elements, each of which has only one bounding rectangle. But given a multi-line element, `getBoundingClientRect` returns an unexpectedly large rectangle including its rightmost bottom edge. Solution ==== Use `getClientRects` to create blocks instead of `getBoundingClientRect`. It returns all rectangles of elements including multi-line elements.
canalun
reviewed
Jul 29, 2024
Owner
canalun
left a comment
canalun
left a comment
There was a problem hiding this comment.
Thank you so much for finding this bug! It's really tricky and I overlooked it.
Many thanks!!!
👍Thanks for reading to the bottom line! This is the last pull request so far. I don't mean I'll stop contributing after this, but I won't do anymore for the time being. 🙇お忙しい中ありがとうございます！お疲れ様です🍵
I am so grateful that words can't express my appreciation...! This app improves a lot thanks to you, igrep-san.
I look forward to enjoying happy-coding with you somewhere again!!
Of course, you're always welcome to come back to this repo whenever you want :)
Co-authored-by: canalun <i.am.kanaru.sato@gmail.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.
Problem
Blocks of multi-line inline elements can be broken even if they don't look collided with the ball in some cases.
Here's an example reproduced by the
controlMode: "mouse"feature created in #15, and hard-codingvisualizeBlocks: false(checkout my debug branch if you reproduce by yourself):As you can see, the larger block
12345678901234567890got broken just as the12345got hit.The source of the screenshot HTML is here.
Cause
This is because the blocks of elements are created from the rectangles returned by
getBoundingClientRect, which returns only one rectangle from an element.getBoundingClientRectdoesn't have a problem with most elements, each of which has only one bounding rectangle. But given a multi-line element,getBoundingClientRectreturns an unexpectedly large rectangle including its rightmost bottom edge.Solution
Use
getClientRectsinstead ofgetBoundingClientRectto create blocks. It returns all rectangles of elements including multi-line elements.NOTE