Gradients not showing properly on Ios

Topic summary

Main issue: Gradients stopped rendering on iOS about a month ago, appearing as flat color. They still display correctly on Android, desktop, and in Shopify’s mobile editor.

Attempted fix: A code snippet from another thread partially worked but also applied the gradient to the header unintentionally.

Support feedback: Shopify support declined direct help, noting it may be addressed by tech support at an unspecified time.

Proposed solution: Use iOS-specific CSS (vendor-prefixed -webkit- gradients) and verify the CSS implementation for iOS Safari compatibility. The store owner does not know CSS and requested assistance.

Actions taken: A helper offered to implement the fix and was added as a staff member via email to review and adjust the CSS.

Notes:

  • “-webkit-” refers to vendor-prefixed CSS properties needed for certain features in iOS Safari.
  • Images are central to understanding the issue, showing the expected gradient, the flat appearance on iOS, and the unintended header styling after the attempted fix.

Status: Ongoing; no confirmed resolution or final code changes reported yet.

Summarized with AI on December 23. AI used: gpt-5.

I think u need a properly verify the code and then change the css for ios