perf(ripple): avoid page layouts from ripple elements #17253
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
A while ago we removed the `transform` from the `.mat-ripple` element in order to avoid creating extra layers for elements that the user isn't interacting with. As a result the ripple elements can cause layouts to be triggered on the entire page, which is noticeable on larger pages (see angular#17252). These changes are a hybrid solution where we add the `transform`, but only if the `.mat-ripple` element has content. This isn't bulletproof since the `:empty` selector can be invalidated by whitespace. For now this is our best solution that works across browsers, until the `contain` property gets better support. Fixes angular#17252.
crisbeto
added
P2
googlebot
added
the
cla: yes
devversion
reviewed
Oct 1, 2019
There was a problem hiding this comment.
I'm not too deep into the issue, but it sounds reasonable to me. Especially since we don't always elevate the ripple container (which would cause another performance/memory issue: #12647)
|
@jelbourn @devversion this is still an issue. Should we keep this PR moving? |
|
Yeah, there's not a presubmit result for it in the history, so I'll try to make sure one gets run tonight |
devversion
approved these changes
Dec 2, 2019
devversion
added
pr: lgtm
action: merge
yifange
pushed a commit
to yifange/components
that referenced
this pull request
Jan 30, 2020
A while ago we removed the `transform` from the `.mat-ripple` element in order to avoid creating extra layers for elements that the user isn't interacting with. As a result the ripple elements can cause layouts to be triggered on the entire page, which is noticeable on larger pages (see angular#17252). These changes are a hybrid solution where we add the `transform`, but only if the `.mat-ripple` element has content. This isn't bulletproof since the `:empty` selector can be invalidated by whitespace. For now this is our best solution that works across browsers, until the `contain` property gets better support. Fixes angular#17252.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
A while ago we removed the
transformfrom the.mat-rippleelement in order to avoid creating extra layers for elements that the user isn't interacting with. As a result the ripple elements can cause layouts to be triggered on the entire page, which is noticeable on larger pages (see #17252).These changes are a hybrid solution where we add the
transform, but only if the.mat-rippleelement has content. This isn't bulletproof since the:emptyselector can be invalidated by whitespace. For now this is our best solution that works across browsers, until thecontainproperty gets better support.Fixes #17252.