[Background scrolling] Cart drawer, filters, quick add modal

[andrewetchen]

Describe the current behavior

Follow up for #1544

This originated from the Cart drawer PR:

• Cart drawer #1544 (comment)

Describe the expected behavior

On mobile (iPhone and iPad), when you open the cart drawer, you're able to scroll the background after editing the cart note:

Video

cart-drawer-_-iPhone-scrolling.mov

Version information (Dawn, browsers and operating systems)

• Dawn: 4.0.0, 5.0.0
• Chrome: 101.0.4951.41
• macOS: 12.3.1
• iOS: 15.4.1

Possible solution

I haven't looked into a possible solution yet but wanted to create this issue so we can explore this later.

Additional context/screenshots

Video showing background scrolling

cart-drawer-_-iPhone-scrolling.mov

I was able to replicate the issue using the following:

• iPhone 7 Plus with the latest iOS 15.4.1
  • Tested on the latest version of Chrome, Safari, and Firefox
• iPad Air (4th generation) with the latest iOS 15.4.1
  • Tested on the latest version of Chrome, Safari, and Firefox

I also found that without editing the cart note, if I pinch-zoomed a little bit with the cart drawer opened, the same background scrolling occurs.

If you read this discussion #1544 (comment), @ludoboludo wasn't able to replicate this using a smaller iPhone:

Ludo's video

VID-20220504-WA0001.mp4

---

Potential related issues

• Prevent the page from scrolling when modals are open on iOS #829
• [Filters] Remove scroll when drawer layout is opened #1549
• Collection page: background is scrolling when collapse on desktop is on #1436
• Could be other related or similar issues (feel free to add them to this issue).

[ludoboludo]

Yeah on the smaller phone it makes sense I think that it's not easy to replicate. There is a media query based on the height of the device which changes a bit the behaviour of the drawer. So that the user can more easily see the items in their cart.

[andrewetchen]

Moving this discussion #1706 (comment) to this issue.

---

Meanwhile, I have a theory on what could be causing it but I don't have an iPhone or iPad device to test. Can you confirm if this issue still happens if we disable Enable sticky header on the Header setting?

Sticky header removes the overflow-hidden class from body on every scroll event. I think we should change that regardless of it being the cause of this specific issue.

If you are scrolling while the modal is still opening, the class will be added and then removed. I wonder if Safari causes a scroll event on window just before the modal initializes, or if it actually detects one at some point.

Thanks @LucasLacerdaUX and thanks for sharing that context on the sticky header setting.

I tested with Enable sticky header disabled on my iPad using Chrome and Safari. The behaviour improved a little bit (no background scroll after opening the quick add modal the first and second time) but when I open the Temporary Dogs product (opening a product for the third time, I was still able to scroll.

This video was using Chrome:

background-scrolling-quick-add-modal-ipad.mov

Similar behaviour with Safari. The only difference was that I was able to fully scroll the background when I went to the Temporary Dogs product.

[andrewetchen]

I forgot to cc you, @duygukalaycioglu - I moved the discussion to this issue 😄