Account for box-sizing: border-box
#2
Merged
Conversation
This file contains 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
This needs slightly different changes for webkit/chromium and firefox. Firefox's width is close to correct, but needs to subtract out the border width. Chrome and Safari need to use the clientWidth property instead of width.
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.
Background
This is some of the upshot from the investigation in https://github.com/github/github/pull/200660
After some initial investigation I realized that I hadn't properly evaluated
textarea-caret's behavior when a scrollbar was present. We usebox-sizing: border-boxeverywhere, but the test page doesn't. I was stumped for a little while until I read through the properties carefully.What this PR does
<textarea>withbox-sizing: border-box. Along the way I converted the test page to properly use the new ES module -- I think it's broken in the base branch.Here's an example of the bad behavior in chrome. Note the cursor is off by a few lines, and you can see visible differences in the line wrapping.
chrome-before.mp4
Firefox is much better but still has small differences in width that add up (Firefox also scrolls for you when you click in the demo, forgive the jerkiness). This is especially apparent in the last few seconds of the video.
firefox-before.mp4
box-sizing: border-box. Webkit/Chromium and Firefox needed separate fixes. I've evaluated these through quite a bit of trial and error, and I think this makes the results pixel-perfect on all three browsers.Here's chrome after the fix. Note the cursor and wrapping line up perfectly now.
chrome-after.mp4
Firefox is also fixed from what I can tell, both testing here and in the other PR.
firefox-after.mp4