search

Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
Other
2.5k stars 3.36k forks source link

Dawn 2.4.0 static background gradient on iOS mobile devices #1076

Open JustTobinHere opened 2 years ago

JustTobinHere commented 2 years ago

Describe the current behavior

Dawn's (version 2.4.0) background gradient feature on mobile is static on iOS devices, while on the theme customizer and androids it is dynamic and become the size of the page as well as moving with the scroll. On iOS devices, either on Chrome or Safari, the gradient ends up being in the middle of the homepage vertically and makes the top of the page just one color and the bottom the other (defeating the purpose of a shorter gradient.)

I was able to replicate this issue that the merchant was escalated with on my test store and all examples below are from my test store as well.

Describe the expected behavior

Theme customizer and Androids are performing the expected behaviour - dynamic matching with the device.

Device information (browsers and operating system)

Mobile devices using iOS operating system, while using Chrome or Safari.
Dawn version 2.4.0

Possible solution

NA

Additional context/screenshots

My Test Store with background gradient on iPhone using Safari - same happens for Chrome on an iPhone as well. (Not expected behaviour.)

My Test Store with background gradient on Samsung Galaxy on Chrome. (Expected behaviour.)

My Test Store with background gradient in the theme customizer on mobile view. (Expected Behaviour.)

Theme Settings for the Background Gradient (This is exactly how the merchant who was escalated had theirs.)

Add any other context about the problem here. If applicable, add screenshots to help explain.

Could not find another issue related to this, only one other one that has to do with a white bar showing at the bottom with the background gradient enabled.

shawnr42 commented 2 years ago

I think I was able to track down the root cause of the issue.

Safari uses -webkit-linear-gradient instead of linear-gradient and uses -webkit-radial-gradient instead of radial-gradient.

I used the inspect tool on a shop and experimented changing the variable name in the theme.liquid to include the -webkit- prefix for the gradient and it worked fine, as you can see in this screenshot.

image

Additional variables specifically for iOS Safari may fix this.

shawnr42 commented 2 years ago

I've created a problem ticket for Shopify internal tracking. Ticket number is 29342562

JustTobinHere commented 2 years ago

Thank you Shawn! I've added my on hold ticket to the problem ticket you made.

brsingr commented 1 year ago

Hey there, this seems to be expected behaviour at the moment, that colour gradients do not work on mobile for Shopify Themes like "Taste", independent of the operating system (iOS or mobile).

Video here for Desktop (desired behaviour with gradients) video here Video here for mobile with Google Pixel / Google Chrome video here

Merchants will wonder why that is the case, even if we cannot make it happen at the moment, there is a lack of documentation in the Help Center here and theme editor.

Maybe we could at least provide a guru card internally "why" we are not supporting it to empower advisors? Looking for support of colour gradients online, seems to show support for most mobile browsers. For example Browser compatibility with CSS Gradients | BrowserStack.