Streaming live at 10am (PST)

Background gradient disappears on published sites for phones?

#1

Hi everyone!

I believe I have found a (quite annoying) bug; when I use background gradients, these sometimes completely disappear on smaller devices; they appear fine on desktop, and then they are simply not visible for phones.

Said gradients appear in the designer just fine, even in the preview, but when I view the site on an actual device, the gradient just isn’t there.

Here is my preview link: https://preview.webflow.com/preview/lumiere-beauty?utm_source=lumiere-beauty&preview=d56516f2916f1c1a49649338920b7686

EDIT: Published site link: https://lumiere-beauty.webflow.io/

The gradient in question is at the very bottom of the site, on the footer. If you view this section with the preview link on mobile, you’ll see the gradient appears, but the published site doesn’t show it (again, for mobile only).

Any ideas if this is an actual bug or am I doing something wrong? I hate using an absolute div with a background gradient on top of the section, that is just a bad work-around.

Cheers!
Kev

#2

Which phones did you test this against?

#3

Androids: one LG G4, and one Samsung Galaxy. Plus the client says the gradient doesn’t show up for them on their iPhone either.

I should’ve added the link to the published site, here it is :slight_smile: https://lumiere-beauty.webflow.io/

#4

I am assuming you are referring to footer.section.footer. Not seeing the issue on iPhone (Xr, X on 12).

CloudApp

As for the other devices, you should test yourself to validate what your client is reporting to you or not.

Knowing the android version is important.

I normally just spin up a pen on codepen.io, isolating just that element, then testing the debug page across devices.

https://s.codepen.io/netdoctor/debug/MREMYJ/XxkVwaEnWwwM

Whether a specific browser supports a specific CSS feature is not a webflow bug. I am moving this topic as a result. -> Design Help -> Layout.

#5

Thanks for the info, webdev, I didn’t know one could use codepen to debug!

However, this CSS feature is being used on the Hero section of this website (background image + gradient on top) and the gradient does appear for phones there.

Plus, this is not the first time this happens. I once had a site with different gradients on different sections and only 1 of them was not showing the gradient, even though they had all the same CSS feature pattern (again, background image + gradient).

Thank you

#6

Another thing; when I tilt my phone (phone landscape) it does show the gradient. It only stops showing on vertical viewports, even though the CSS on the vertical phone is being inherited from landscape phone (orange markers on Webflow, not blue).

#7

Based on your feedback, I would dive deeper into the height of the section as a contributing factor.

You could easily tweak that in a pen to test on mobile.

The workaround may be to provide an image with the fade already rendered for mobile versus image + linear gradient.