Bg gradients not working on iPhone Chtome

[franklindambra]

What version of Tailwind CSS are you using?

For example: v4.0.6

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss-cli 11.0.0, Next.js 15.1.7, Vite 6.1.0

What version of Node.js are you using?

For example: v20.0.0

What browser are you using?

For example: Chrome, Safari, or N/A

What operating system are you using?

For example: macOS, Windows

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[franklindambra]

What version of Tailwind CSS are you using?

"tailwindcss": "^4.0.13"

What build tool (or framework if it abstracts the build tool) are you using?

"next": "15.2.1", "postcss": "^8.5.3", "react": "^19.0.0",

What version of Node.js are you using?

v22.12.0

What browser are you using?

Chrome on iPhone 12 v 134

What operating system are you using?

iOS

Reproduction URL

https://twdb-five.vercel.app/
https://github.com/franklindambra/twdb

Describe your issue

**On iPhone 12, Chrome v133 -

Background gradients, drop shadows, and border classes are not working.
Not related to system light/dark mode.**

iPhone 12 Chrome v 133:

desktop:

[philipp-spiess]

Hey! What version of iOS are you using? All browsers on iOS use the WebKit rendering engine so you'll need to make sure that your iOS version is 16.4+: see: https://tailwindcss.com/docs/compatibility#browser-support

[franklindambra]

I'm on 16.3 and am not in a position to update my OS. Is there a simple way to do a conditional fall back to a solid color? I imagine my case spec wise with the phone is relatively common. Thanks for your reply!

[franklindambra]

Also I might add that I have another deployed Next app with tailwind v 3.4.1 that does not display this gradient utility class issue in the mobile phone context mentioned above