Description
A highly unpolished visual bug exists during the initialization phase of the <ProductViewer3D /> on iOS Safari. While the heavy WebGL engine is booting up, we render a transparent PNG spinner overlay. However, due to a specific quirk in Apple's rendering engine regarding CSS backdrop-filter combined with alpha-channel PNGs, the background of the image aggressively renders as a solid, jarring black box, completely destroying the premium aesthetic of the site.
Proposed Solution
- Audit the CSS architecture applied to the
<ViewerLoadingOverlay /> component.
- The bug is triggered by applying
backdrop-filter: blur(10px) to a container that lacks a strictly defined, opaque background color when rendering on iOS WebKit.
- Refactor the overlay. Remove the problematic transparent PNG and replace it with a pure CSS-based spinner animation (or an inline SVG). Ensure the parent overlay container utilizes a strict RGBA background (e.g.,
background-color: rgba(255, 255, 255, 0.8)). This bypasses the WebKit alpha-channel bug entirely, guaranteeing a flawless, premium, blurred loading state across all devices.
Description
A highly unpolished visual bug exists during the initialization phase of the
<ProductViewer3D />on iOS Safari. While the heavy WebGL engine is booting up, we render a transparent PNG spinner overlay. However, due to a specific quirk in Apple's rendering engine regarding CSSbackdrop-filtercombined with alpha-channel PNGs, the background of the image aggressively renders as a solid, jarring black box, completely destroying the premium aesthetic of the site.Proposed Solution
<ViewerLoadingOverlay />component.backdrop-filter: blur(10px)to a container that lacks a strictly defined, opaque background color when rendering on iOS WebKit.background-color: rgba(255, 255, 255, 0.8)). This bypasses the WebKit alpha-channel bug entirely, guaranteeing a flawless, premium, blurred loading state across all devices.