fix(ripple): not fading out on touch devices #12488

devversion · 2018-08-02T15:50:22Z

Makes the ripple animations no longer dependent on setTimeout that does not always fire properly / or within the specified duration. (related chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=567800)
Fix indentation of a few ripple tests and that the speed factor tests are basically not checking anything (even though they will be removed in the future; they need to pass right now)

jelbourn · 2018-08-02T16:17:06Z

From that issue, it makes it sound like this only happens if you're constantly tapping, no?

If that's the case, wouldn't it be simpler just to cap the number of ripples that could appear?

devversion · 2018-08-02T16:25:38Z

It also happens if you just scroll constantly around and accidentally touch an elements that have ripples registered.

Capping the number of ripples that can appear, would be another possible solution, but I guess that kind of limits how the ripples work. Each ripple target has its own RippleRenderer and making them communicate globally in between feels wrong.

Each ripple should work independently from other ripples. e.g. there can be people who touch multiple elements at the same time (I have no specific example), or there are ripples manually being launched for a tutorial on a page. Also I've wanted to switch away from timeouts a long time because by using transitionend we don't need any timeout, compared to having two.

This should not only fix the issue, but also give us a small performance improvement for the ripples.

src/lib/core/ripple/ripple-renderer.ts

jelbourn

LGTM

ngbot · 2018-08-21T18:54:40Z

Hi @devversion! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

devversion · 2018-08-22T15:10:53Z

@jelbourn Rebased.

ngbot · 2018-09-11T18:03:58Z

Hi @devversion! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

ngbot · 2018-09-19T21:33:01Z

Hi @devversion! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

devversion · 2020-09-11T10:22:32Z

I've rebased this one again. Could we get another presubmit on it? cc. @andrewseguin @mmalerba

I see in the caretaking notes that ripples persisted unexpectedly. I assume this happened in tests? Hopefully not too many apps test the ripple timing.

devversion · 2021-08-17T11:43:59Z

@jelbourn I've rebased this one again. I think we should still merge this as it improves overall performance of the ripples, and fixes a bug that results in ripples persisting while the user scrolls on mobile. Can we have another presubmit for this? I assume this this fix is still relevant since our MDC-based components also use our ripple. cc. @wagnermaciel

github-actions · 2022-02-22T18:16:47Z

Deployed dev-app to: https://ng-comp-dev--pr-12488-cbc5f7c46800842ffcc8c3bad0ff5939-vpfh9aye.web.app

…lling * Makes the ripple animations no longer dependent on `setTimeout` that does not always fire properly / or within the specified duration. (related chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=567800) * Fix indentation of a few ripple tests * Fixes that the speed factor tests are basically not checking anything (even though they will be removed in the future; they need to pass right now) Fixes angular#12470

…en scrolling Backwards compatibility change for g3 tests using just transition: none without the noopanimations module

…en scrolling Support transition-duration

This reverts commit 65fb5f4.

angular-automatic-lock-bot · 2022-03-26T00:03:58Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

devversion added the target: patch This PR is targeted for the next patch release label Aug 2, 2018

devversion assigned jelbourn Aug 2, 2018

devversion requested review from andrewseguin, jelbourn and josephperrott as code owners August 2, 2018 15:50

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 2, 2018

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from 091c448 to 4e93368 Compare August 2, 2018 16:31

jelbourn reviewed Aug 2, 2018

View reviewed changes

src/lib/core/ripple/ripple-renderer.ts Outdated Show resolved Hide resolved

src/lib/core/ripple/ripple-renderer.ts Outdated Show resolved Hide resolved

src/lib/core/ripple/ripple-renderer.ts Outdated Show resolved Hide resolved

jelbourn approved these changes Aug 2, 2018

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Aug 2, 2018

josephperrott approved these changes Aug 2, 2018

View reviewed changes

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from e7efe4c to eafe877 Compare August 19, 2018 11:46

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from eafe877 to e9c5d2b Compare August 22, 2018 15:06

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch 2 times, most recently from 97a26fa to 64ccbfd Compare August 31, 2018 06:46

devversion added the pr: needs rebase label Sep 11, 2018

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from 64ccbfd to b415e23 Compare September 11, 2018 18:23

devversion removed the pr: needs rebase label Sep 11, 2018

devversion added pr: needs rebase and removed action: merge The PR is ready for merge by the caretaker labels Oct 2, 2018

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch 2 times, most recently from d00ffa7 to 5edee00 Compare October 4, 2018 15:42

devversion added the action: merge The PR is ready for merge by the caretaker label Oct 4, 2018

devversion removed the needs rebase label Sep 11, 2020

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from 2615e48 to 532f8c9 Compare September 11, 2020 10:17

devversion requested a review from mmalerba as a code owner September 11, 2020 10:17

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from 532f8c9 to 7d9ef8b Compare September 11, 2020 10:22

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch 2 times, most recently from 4ffbb33 to 0c7325c Compare August 17, 2021 11:37

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch 2 times, most recently from a2fe2e9 to ef82a87 Compare August 17, 2021 11:59

andrewseguin added needs rebase and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Dec 29, 2021

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from ef82a87 to 95e0b8a Compare January 31, 2022 13:24

devversion removed the needs rebase label Jan 31, 2022

devversion added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Feb 22, 2022

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch 2 times, most recently from 0562bb9 to 54595ac Compare February 22, 2022 21:37

devversion requested a review from a team as a code owner February 22, 2022 21:37

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from 54595ac to 88170e9 Compare February 22, 2022 21:48

devversion added 3 commits February 23, 2022 15:17

fixup! fix(material/core): ripples not fading out on touch devices wh…

0b3cf77

…en scrolling Backwards compatibility change for g3 tests using just transition: none without the noopanimations module

fixup! fix(material/core): ripples not fading out on touch devices wh…

cbc5f7c

…en scrolling Support transition-duration

devversion force-pushed the fix/ripple-not-fading-out-touchmove branch from 6f67dbf to cbc5f7c Compare February 23, 2022 14:17

andrewseguin added target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels Feb 23, 2022

andrewseguin merged commit 65fb5f4 into angular:master Feb 23, 2022

andrewseguin added a commit to andrewseguin/components that referenced this pull request Feb 24, 2022

Revert "fix(ripple): not fading out on touch devices (angular#12488)"

8a8bf33

This reverts commit 65fb5f4.

angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ripple): not fading out on touch devices #12488

fix(ripple): not fading out on touch devices #12488

Uh oh!

devversion commented Aug 2, 2018 •

edited

Loading

Uh oh!

jelbourn commented Aug 2, 2018

Uh oh!

devversion commented Aug 2, 2018 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jelbourn left a comment

Uh oh!

ngbot bot commented Aug 21, 2018

Uh oh!

devversion commented Aug 22, 2018

Uh oh!

ngbot bot commented Sep 11, 2018

Uh oh!

ngbot bot commented Sep 19, 2018

Uh oh!

devversion commented Sep 11, 2020

Uh oh!

devversion commented Aug 17, 2021

Uh oh!

github-actions bot commented Feb 22, 2022 •

edited

Loading

Uh oh!

angular-automatic-lock-bot bot commented Mar 26, 2022

Uh oh!

Uh oh!

fix(ripple): not fading out on touch devices #12488

fix(ripple): not fading out on touch devices #12488

Uh oh!

Conversation

devversion commented Aug 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jelbourn commented Aug 2, 2018

Uh oh!

devversion commented Aug 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

ngbot bot commented Aug 21, 2018

Uh oh!

devversion commented Aug 22, 2018

Uh oh!

ngbot bot commented Sep 11, 2018

Uh oh!

ngbot bot commented Sep 19, 2018

Uh oh!

devversion commented Sep 11, 2020

Uh oh!

devversion commented Aug 17, 2021

Uh oh!

github-actions bot commented Feb 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

angular-automatic-lock-bot bot commented Mar 26, 2022

Uh oh!

Uh oh!

devversion commented Aug 2, 2018 •

edited

Loading

devversion commented Aug 2, 2018 •

edited

Loading

github-actions bot commented Feb 22, 2022 •

edited

Loading