Hi everyone,

I'm currently integrating a Quick View feature on my WooCommerce collection pages using Elementor Pro (Off-Canvas / Popup), and I'm running into a frustrating mobile rendering issue.

My Setup:

• I have collection pages with multiple Loop Grid widgets stacked vertically (one Loop Grid per product category — e.g., 6 categories = 6 Loop Grids on the same page).
• Inside each Loop Grid item, there is a Quick View icon that triggers an Elementor Off-Canvas showing the product details and add-to-cart form.

The Problem:

• Desktop: Works 100% perfectly across all categories and Loop Grids.
• Mobile: The 1st Loop Grid works completely fine. However, starting from the 2nd Loop Grid onwards, clicking the Quick View icon opens the Off-Canvas trapped inside the loop item container or rendered in a random broken position instead of taking up the full mobile screen.

It seems like a CSS Stacking Context issue where Elementor applies transform, contain, or overflow properties on mobile elements from the second grid onwards, breaking position: fixed.

Has anyone experienced this issue with multiple Loop Grids on mobile before? How did you resolve the container encapsulation so the Off-Canvas stays fixed to the viewport?

Any help, CSS overrides, or JS workarounds would be greatly appreciated! Thanks in advance!