Having an issue with a background gradient design element in hero section.
I thought everything was good to go, but when I sent the enhanced staging link to my client, on her browser the gradient is clipped by “hide overflow” from the gradient bounding box. See attached image:
However, I can’t recreate the issue on my own machine. I tried all sorts of browser aspects (see video) Webflow Gradient issue - YouTube
Since I cannot recreate the issue. I’m not quite sure where to start. I asked my client to clear her browser cache but that didn’t fix it. I’ve also asked for her specific browser resolution as a starting point.
Here was my thought process on creating the design element so it would scale for all screens.
- create wrapper div with height of 100vh, position absolute, overflow hidden.
- put gradient in the div, also absolute, aspect ratio locked with height at 100vw and width at 100vw.
- I ended up changing width to 1000px. Maybe this is what’s causing the problem?
- Position gradient using absolute position offsets and transformation effects.
I played with it for a while until I had something that scaled nicely. Unfortunately it doesn’t seem to scale the same on other browsers.
Any thoughts? I didn’t find much content or other tutorials on “how to create rotated gradient half backgrounds” so attacked it with my best engineering skills but guess I didn’t quite stick the landing.
Pretty embarrassed that I sent this to my client but that’s life I suppose.
Thanks again. Keegan
Here is my site Read-Only: Webflow - Slope