Hi,
I noticed a trouble when navigating on my shopify website on a android mobile.
I asked sidekick to explain everything as clearly as possible to fix this for the next updates.
Have you ever heard about this? Hope this report will help someone.
Thank you!
THE REPORT:
Theme: Craft (latest version) Affected pages: Collection pages with drawer-type filter enabled Devices tested: Google Pixel 8a — Firefox for Android, Chrome for Android Severity: High — filter functionality is completely inaccessible to mobile users without workaround
Description: When a customer taps the “Filter” button on a collection page on mobile, the filter drawer opens (overlay appears, page interaction is blocked) but the drawer panel renders entirely off-screen to the right. The user must scroll horizontally to find it, with no visual indication that this is required. The drawer is effectively invisible and unusable.
Additionally, when the page has been scrolled down before tapping “Filter”, the drawer content appears offset vertically, requiring the user to scroll up inside the drawer to access filter options.
A third issue: even without opening the filter drawer, horizontal scrolling is possible on collection pages, revealing a blank white area to the right of the viewport.
Root cause (identified): .mobile-facets is set to position: fixed with left: 0; right: 0, which should constrain it to the viewport width. However, on Android mobile browsers, the element inherits an incorrect width (matching the desktop viewport, ~1023px) instead of the actual mobile viewport width. As a result, .mobile-facets__inner, which uses margin-left: auto to align to the right edge of its parent, is positioned at ~648px from the left on a 375px screen — completely outside the visible area.
Workarounds applied (confirmed working):
/* Fix 1: Constrain filter drawer to viewport width */
.mobile-facets,
.mobile-facets__inner {
max-width: 100vw;
}
/* Fix 2: Fix vertical positioning when page is scrolled */
.mobile-facets {
top: 0 !important;
}
/* Fix 3: Prevent horizontal scroll when drawer is closed */
html, body {
overflow-x: hidden;
}