Linear gradient with blur showing up as different color on mobile

Design help General
1

Hey there!
Im using these linear gradients with gaussian blur on my site an they look great on desktop but I noticed in mobile they are showing a completely different color. Please see screenshots. I cant find anything to be causing this, is this a bug?

The page this is on is called “The Appcues Experience 2022”

Here is my site Read-Only: Webflow - Appcues Marketing Website

Screen Shot 2021-12-20 at 12.42.00 PM
Screen Shot 2021-12-20 at 12.42.00 PM782×1372 42.7 KB

Screen Shot 2021-12-20 at 12.42.22 PM
Screen Shot 2021-12-20 at 12.42.22 PM1920×1104 76.5 KB

2

Hi, have you tried to reload page without cache? :thinking: :see_no_evil:

3

Yes, cleared cache on my phone and had someone else who has never been to the page or on the site view on their phone. Im currently deleting the element and remaking it in hopes that fixes it.

4

Redoing the element doesn’t fix it and its not caching - so strange, take a look on your phone!

5

Hey @Tanya_Higgins , are you previewing the page on iOS Safari browser?

6

Yes I am! So is the person I also had test it. Is there a known issue with this?

7

Most probably, it could be the browser rendering issue. Different browsers have different methods to render linear gradients. For example, via code, this is how I would create a cross-browser compatible linear gradient:

From Stack OverFlow → css - Linear gradient in Chrome and Safari browsers - Stack Overflow

background-color: #9e9e9e; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(bottom, rgb(213,12,18), #9e9e9e 40%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image:    -moz-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For Firefox (3.6 to 15) */
background-image:      -o-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For old Opera (11.1 to 12.0) */ 
background-image:         linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* Standard syntax; must be last */

Could you try a different browser on the mobile device, specifically, Firefox and Chrome to see if the issue replicates?

8

Great idea! Unfortunately though, it does the exact same thing in chrome :sob: :sob: :sob: :sob:

9

I know I maybe asking more here, but have you tried Firefox?

10

Ill download and try!

11

Same thing in firefox :frowning:

12

Are you able to PM me the page password so I can test out on Android?

13

Yes! one sec - i didnt even realize i had password on still and didnt add that im so sorry!

14

Thank you, just did a test on Android running Chrome and the gradient loads perfectly fine. I had a similar issue with SVG gradients on iOS devices and I really think it’s how iOS renders gradients.

My workaround was to create the gradient on Photoshop, export as PNG and absolute position it as needed. Since your design is using it as a static decorative design, I think this would work for you.

15

Ok sounds great thank you so much I appreciate it, glad it works in android! Thank you for your time!