I fixed it. Here’s what I did, if helpful to anyone else with the same problem:
Problem: The sticky image wasn’t working on Vercel-hosted builds, but worked correctly in the Plasmic editor.
Root Cause: The issue was caused by setting overflow-x: hidden
on both body
and html
. Since html
is the scrolling element, and sticky
sticks to the nearest containing box (which was body
), the sticky behavior broke.
Solution: Set overflow-x: hidden
only on html
instead of both html
and body
.
Tip: Be careful when setting overflow properties on both html
and body
, especially when working with sticky elements. And always check for layout or global CSS conflicts when working with sticky elements across different environments.
Found the solution here: Sticky Position not working after codegen with next.js (in just react.js it does)