fix(modal): fix scrollbar compensation in some scaling situations #3498
+18
−10
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
Now the actual width of the scrollbar is used to detect if it is present or not, instead of using the wrong hypothesis that if body's rect's width is smaller than viewport's width then there is a scrollbar. Now the difference in width is compared to the width of the scrollbar. Closes ng-bootstrap#3448
Codecov Report
@@ Coverage Diff @@
## master #3498 +/- ##
==========================================
+ Coverage 91.14% 91.39% +0.25%
==========================================
Files 96 96
Lines 2800 2800
Branches 516 517 +1
==========================================
+ Hits 2552 2559 +7
+ Misses 190 183 -7
Partials 58 58
Continue to review full report at Codecov.
|
benouat
approved these changes
Dec 3, 2019
|
Just an idea, but maybe a pure css solution would be simplier: https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page The point is to apply : padding-left: calc(100vw - 100%); on the body. |
Adding uncertainty, because the scaling can make the gap just slightly smaller than a scrollbar size. Closes ng-bootstrap#3448
benouat
approved these changes
Dec 4, 2019
maxokorokov
pushed a commit
that referenced
this pull request
Jan 7, 2020
) Now the actual width of the scrollbar is used to detect if it is present or not, instead of using the wrong hypothesis that if body's rect's width is smaller than viewport's width then there is a scrollbar. Now the difference in width is compared to the width of the scrollbar. Adding uncertainty, because the scaling can make the gap just slightly smaller than a scrollbar size. Closes #3448
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.
Now the actual width of the scrollbar is used to detect if it is present or not, instead of using the wrong hypothesis that if body's rect's width is smaller than viewport's width then there is a scrollbar. Now the difference in width is compared to the width of the scrollbar.
Closes #3448
I am sorry I am mixing the fix along with a bit of variables renaming and comments rewriting (but I felt separating commits/PRs would be too cumbersome, and at the same time the code was not self-explanatory enough).
The core of the fix really resides:
compensatewhich now passes the scrollbar width not only to_adjustBodybut also to_isPresent_isPresentwhich now uses this width to refine widths comparison and more accurately determine if a scrollbar is present or not