Skip to main content

FluentCart 🚀

#Bug Report

Cart drawer overlay animates on every page load (`transition: all`) — full-screen flash on all pages

Hi team — small but sitewide visual bug: the cart drawer's overlay (the dim backdrop) animates itself on every page load, so a full-screen dark layer flashes across the screen on every navigation even when the cart is closed and untouched. Traced to one line in the drawer stylesheet.

Environment

FluentCart 1.6.1 (+ Pro 1.6.1), WordPress 7.0.4, PHP 8.5.9. Side/drawer cart enabled; happens whether the cart is empty or has items, on every front-end page. It's a CSS behaviour, so not browser- or theme-specific.

Steps to reproduce

  1. Enable the drawer (side) cart.
  2. Load any front-end page, or navigate between pages.
  3. Watch the top-left of the viewport as the page paints.

Expected: the closed overlay stays hidden and inert on load.
Actual: a translucent black layer expands from the top-left and fades out over ~0.5s — a full-screen flash — on every load.

Root cause

The overlay is a full-viewport, top-left-pinned, high-z-index element that uses transition: all:

.fct-cart-drawer-overlay {
  position: fixed; inset: 0; z-index: 999999;
  width: 100%; height: 100%;
  opacity: 0; visibility: hidden;
  background: rgba(0,0,0,.5);
  transition: all 0.5s;   /* ← animates on first paint */
}

transition: all animates any property that changes — including the ones settling from browser defaults into this hidden state on first paint. So on every load the overlay animates opacity/visibility/width/height from default → hidden. Confirmed: document.getAnimations() immediately after load shows five running transitions on .fct-cart-drawer-overlay, an element nobody interacted with. .fct-cart-drawer has the same pattern but sits off-screen (left:100%), so its load transition is invisible.

Suggested fixes (any one resolves it)

  1. Scope the transition to what open/close needs: transition: opacity .3s, visibility .3s (plus transform for the panel) instead of all.
  2. Or don't transition while closed: .fct-cart-drawer-overlay:not(.active){ transition: none; } — the open animation still runs via .active.
  3. Respect motion prefs: @media (prefers-reduced-motion: reduce){ .fct-cart-drawer-overlay, .fct-cart-drawer { transition: none } }.

Impact is broad: the drawer is global, so this flashes on every front-end page for every visitor on any site with the side cart enabled — and it ignores prefers-reduced-motion. Immediate workaround is fix #2 in site CSS (verified: drops the five load-time transitions to zero, flash gone, cart still opens/closes normally). Happy to test a patch. Thanks!

  • 1 like