Skip to content

Gradient not working in Safari Browser

February 20, 2014

The other day my colleague discovered that some of the gradients applied to a JQuery Mobile button were not working on the Safari Web Browser at all. After researching this, according to the official Apple Developer web page it states: –

Note: Recent drafts of the W3C proposal have simplified the syntax. This chapter describes the most recent implementation shipping in Safari. You should expect Safari’s syntax for gradients to continue to change as the W3C standard evolves. While new syntax is expected, the existing syntax—and prior syntax—should still work.

The -webkit-linear-gradient and webkit-radial-gradient properties require iOS 5.0 or later, or Safari 5.1 or later on the desktop. If you need to support earlier releases of iOS or Safari, see “Prior Syntax (-webkit-gradient).”


To fix this for my CSS styling, you just need to add the following to apply the gradients to the JQuery Mobile button like so: –

.ui-page-theme-a .ui-bar-inherit.ui-header {
background: #084596;
background-image: -webkit-linear-gradient(top, #084596, #3165CA);
background-image: -moz-linear-gradient(top, #084596, #3165CA);
background-image: -o-linear-gradient(top, #084596, #3165CA);
background-image: linear-gradient(to bottom, #084596, #3165CA);

See the first line of background-image, this should fix the problem for Safari. Never was a fan of Safari!


From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: