search

ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

Jumpy/Shaky Safari Scrolling #33540

Closed email-jedi closed 3 years ago

email-jedi commented 3 years ago

What's the issue?

AMP for Email Slides appear shaky/jumpy in Safari with left/right scrolling

Briefly describe the bug. AMP-Carousel being jumpy/shaky in Safari? Saw this when using the left/right scroll option for the magic mouse, the first scroll through was using the controls directly. It happened for my gmail address, but also in the playground directly using the example under Slides.

How do we reproduce the issue?

Create an email with an AMP Carousel and open the email through Gmail on Safari. Or open the following page in Safari: https://amp.dev/documentation/examples/components/amp-carousel/?format=email and use the example under Slides. Using a magic mouse to scroll left/right rather than the controls on screen or the arrow keys. Scrolling to fast causes the slides to appear jumpy/shaky in Safari. I wasn't able to replicate this in another browser.

Please provide a public URL and ideally a reduced test case (e.g. on jsbin.com) that exhibits only your issue and nothing else. Provide step-by-step instructions for reproducing the issue:

Shared AMP Playground

  1. Open the link withinSafari
  2. Click within the AMP Carousel
  3. Using a magic mouse, swipe left/right to scroll left/right and view more content.
  4. You should see the images shake as the scrolling stops.

AMP-Safari

What browsers are affected?

Safari Version 14.0.3 (16610.4.3.1.4), Macbook Pro

Which AMP version is affected?

AMP for Email currently only uses 1.0 I believe.

Is this a new issue? Or was it always broken? Paste the version of AMP where you saw this issue. (You can find the version printed in your browser's console.) I don't often test in Safari, this was brought to my attention by another team member, so I can't say if it's always been this way or not. <html ⚡4email data-css-strict amp-version="2103122145004">

email-jedi commented 3 years ago

@micajuine-ho let me know if anything else is needed

micajuine-ho commented 3 years ago

@email-jedi Thanks for your bug report! On the playground example, when you try it on AMPHTML instead of amp for email, is the same behavior exhibited?

email-jedi commented 3 years ago

@micajuine-ho Yes. Link for the AMPHTML in the Playground

micajuine-ho commented 3 years ago

Can you sanity check me?

On safari, using the touch pad to scroll, when you scroll to the last slide and then scroll back 1 slide, the carousel shifts to index 0 instead of index 1. Are you seeing this too?

email-jedi commented 3 years ago

Yes, I see it too. If I scroll too fast when scrolling back from the 3rd side, it totally skips the second slide and jumps back to slide 1.

micajuine-ho commented 3 years ago

Same thing happens on chrome. Perhaps these two things are related. I could see a case where indexing is wrong which messes up the css.

@email-jedi as a sidenote, have you looked into using amp-carousel-0.2?

email-jedi commented 3 years ago

@micajuine-ho I didn't think that was available for email yet? At least that's the notice I get when selecting it -- Important: this documentation is not applicable to your currently selected format email!

If the playground drop down is set to AMPHTML and I use amp-carousel-0.2 in Safari, the issue doesn't occur. But I mainly work with AMP for Email.

micajuine-ho commented 3 years ago

Ahh, it seems like 0.2 has not yet been supported in email (I will look into pushing out support for it).

On safari, using the touch pad to scroll, when you scroll to the last slide and then scroll back 1 slide, the carousel shifts to index 0 instead of index 1. Are you seeing this too?

After testing a bit more and talking to @caroqliu I believe this is WAI, as it only skipping slide with very forceful sliding motions (i.e. it's respecting momentum of scrolls).