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.
Additional variables specifically for iOS Safari may fix this.
JustTobinHere
brsingr
NeevusPeevus
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.