Shopify cart drawer
mobile flicker.

Symptoms

• Drawer jumps or stutters when you scroll the cart items on iOS Safari or Chrome for Android.
• Drawer height changes abruptly as the mobile browser URL bar appears or disappears.
• Drawer closes immediately after opening on mobile, acting like an accidental click outside.
• Scroll locks entirely and the user cannot scroll the page or the cart drawer.

Most likely causes, ranked

1. 01
   Theme uses 100vh for drawer height.

   When a user scrolls, mobile browsers hide the address bar to save space. This changes the viewport height, causing 100vh to recount and trigger a reflow. The drawer jumps.

   Fix: Use the CSS snippet below to change 100vh to 100dvh (dynamic viewport height) in the theme's drawer CSS.

2. 02
   JS resize event loop.

   Some themes recalculate the drawer height in JavaScript using a window.addEventListener('resize'). Because the address bar hiding triggers a resize, this creates an infinite flicker loop.

   Fix: Debounce the resize event in your theme's JS, or ideally, remove the JS height calculation entirely and rely on CSS 100dvh.

3. 03
   Body scroll lock conflict.

   When the drawer opens, the theme adds an overflow: hidden to the body to prevent background scrolling. If an app also tries to lock the scroll, the competing CSS causes a jump.

   Fix: Disable apps that add mobile navigation overlays or sticky elements, one by one, to find the conflict.

4. 04
   Overscroll behavior.

   iOS Safari introduces a bounce effect at the top and bottom of scrollable areas, which can break absolute positioning inside the drawer.

   Fix: Add overscroll-behavior: none; to the drawer container in CSS.

5. 05
   Virtual keyboard layout shift.

   If the drawer contains a text input (like an order note or discount code) and the user taps it, the virtual keyboard pushes the layout up, collapsing the view.

   Fix: Add height: 100svh; (short viewport height) to inputs if they need to stay visible above the keyboard, or remove fixed footers from the drawer.

The CSS dvh fix (cause #1)

/* Jelonyx · Cart drawer mobile dvh fix */
/* Add to base.css or component-cart-drawer.css */
.cart-drawer {
  /* Fallback for older browsers */
  height: 100vh; 
  /* Modern dynamic viewport height */
  height: 100dvh; 
  /* Alternative if dvh is not supported: height: -webkit-fill-available; */
}