Flickering on iOS when scrolling a screen with multiple tooltips / button ink effects

[srdone]

I'm working on an app that uses multiple instances of md-tooltip and md-button inside md-cards in a ui-view (using ui-router). When I scroll on my iPhone 5, I get an annoying flicker.

It only seems to happen whenever my finger hits one of the elements with animation (like the tool-tip or the button). If I avoid hitting them, I don't get any flickering. Is there a way to stop those animations from happening while the screen is scrolling so I can avoid this issue?

[srdone]

Here's a github repo as an example. https://github.com/srdone/angular-material-flickering-ios

[tam3r]

+1. Ripple animation on a touched element occurs even when scrolling. An easy fix is to detect scrolling and prevent ripple animation from happening in that case.

[emmagamma]

I've been experiencing the same problem as well.

Looks like it's because of this line:
https://github.com/angular/material/blob/master/src/components/button/button.js#L75

Which calls some of this code:
https://github.com/angular/material/blob/master/src/core/services/ripple/ripple.js#L64-L101

Which is using the $md.pressdown event. I'm at work right now, but I'll make a PR later (if no one else does) that checks to see if the user moved their finger within the first N milliseconds of touching down and cancels the ripple accordingly.

Not sure about the flicker problem though?

[srdone]

I'm pretty confident the flickering is caused directly by the ripple animation starting during a scroll event. When I scroll on my iPhone and avoid touching any part of the screen where a ripple effect might happen, I do not see the flickering. If we can stop the ripple animation from firing during a scroll event, my hunch is that the flickering issue will disappear.

[srdone]

See issue #1847. This is happening because the tooltip doesn't have a default delay value. Adding md-delay="400" to the md-tooltip directive fixes the issue by delaying the animation long enough so a scroll event doesn't trigger the animation. It gets rid of the flickering issue. Thanks to @superbullock for the idea to look for a built in way to delay the animation. Closing and referring to the other issue.

[tam3r]

the issue concerns any element with ripple animation attached. Say, I have a bunch of div's with md-ink-ripple . The suggested md-delay solution does not seem to work in that case. I'd say ripple animation should only be triggered if touchmove event does not fire.

[srdone]

@tam3r I think you are right - I am still seeing the flickering issue when I accidentally touch a button during a scroll event.

[ThomasBurleson]

References #3952