fix(cdk/overlay): scroll was blocked when zoomed out even if scrolling wasn't an option #30548
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
szoboszlaypali
requested review from
crisbeto and
mmalerba
and removed request for
a team
@mmalerba About the failing Firefox tests, since the test suite runs Firefox 125 and Firefox only started supporting style.zoom from 126, the failing test would pass if a newer version ran. I'm not sure if I can fix this, but let me know if there's anything I can do |
|
I think its fine to just leave a comment to that effect and skip the test on firefox (here's an example of that: https://github.com/angular/components/blob/main/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts#L66) |
szoboszlaypali
requested review from
a team,
andrewseguin and
jelbourn
as code owners
…g wasn't an option Fixes that an unnecessary disabled scroll bar was added when zoomed out during opening dialogs. Fixes angular#25054.
angular#30749) Even though Material is currently decoupled from the animations module, users still need to import the `NoopAnimationsModule` to disable them. These changes introduce a custom token so that users don't have to depend on the animations-related packages at all.
Removes code that we added to support Angular versions less than 19.1.
Co-authored-by: Andrew Seguin <[email protected]>
* refactor: merge m2 mdc and mat tokens * refactor: lint --------- Co-authored-by: Andrew Seguin <[email protected]>
Co-authored-by: Andrew Seguin <[email protected]>
…angular#30751) angular#30514 changed the logic that syncs destroyed items to apply to non-dragged items as well. This led to a performance regression where swapping out a large list of items can lock up the entire browser. The problem is that the items need to be re-sorted each time an item is destroyed which is expensive. These changes resolve the issue by keeping track of the last set of items and dropping the item from it without re-sorting. Fixes angular#30737.
…angular#30733) * refactor(cdk-experimental/ui-patterns): track list selection by value * Switch to using values instead of ids for tracking selected items in a list * fixup! refactor(cdk-experimental/ui-patterns): track list selection by value * fixup! refactor(cdk-experimental/ui-patterns): track list selection by value * fixup! refactor(cdk-experimental/ui-patterns): track list selection by value
* refactor: merge m3 mdc and mat tokens * refactor: missing tokens * refactor: missing token * refactor: lint --------- Co-authored-by: Andrew Seguin <[email protected]>
…g wasn't an option Ignore the added tests in Firefox
szoboszlaypali
force-pushed
the
pszoboszlay-global-scrollblock-fix
branch
from
8da76b6 to
2ea0c72
Compare
angular-robot
bot
added
detected: feature
|
Alright, I messed up this branch/PR pretty badly, I'll create another with the fix with one commit |
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.
Fixes that an unnecessary disabled scroll bar was added when zoomed out during opening dialogs.
Fixes #25054.
When you zoom out using the browser (not the style.zoom css), dimensions can become non-whole numbers. window.innerHeight/innerWidth uses Math.floor to round these dimensions, while body.scrollHeight/scrollWidth uses Math.round (at least that's what I assume), so in case you zoom out and your browser shows that your width is 1000.66px for example, the previous implementation returned false positives if there were no scroll bars, as the scrollWidth was 1001px while innerWidth was only 1000.
Another thing I've ran into is using the style.zoom css api, while the innerHeight and innerWidth remains unchanged during zoom, working as intended body.scrollWidth can outgrow window.innerWidth without a scroll bar appearing (easily testable with the Google home page).
Relying on the root documentElement's scrollWidth and scrollHeight seems to fix both cases.