Gradient Support in Safari

Harsh Kurra
2 min readNov 5, 2019

Recently, I was using a Linear Gradient in one of my projects, to implement linear-gradient I have read complete usage documentation from MDN, It works like charm on Chrome, firefox but when I tested it on safari it was not working as expected then I have found out, safari requires special WebKit prefixed gradient function, instead of normal gradient function

background: -webkit-linear-gradient(aqua, white)

I have added two background styling like we generally do to support different vendor-specific properties

background: -webkit-linear-gradient(to right, rgb(245, 245, 245, 0.8), #f5f5f5 65%);

background: linear-gradient(to right, rgb(245, 245, 245, 0.8), #f5f5f5 65%);

Still, it was not working on safari as expected maybe you have figured out the issue, but it took me more than 40 min to found the actual issue, yes the issue is, it should be rgba instead if rgb, well at my end we have some utility which is converting Hex color to RGBa color I have never realized it is giving rgb instead of rgba but why I was not able to found this bug earlier? because Chrome and Firefox both behaving correctly with rgb(245, 245, 245, 0.8) wheres safari requires rgba in order to make it work.

background: -webkit-linear-gradient(to right, rgba(245, 245, 245, 0.8), #f5f5f5 65%);

background: linear-gradient(to right, rgba(245, 245, 245, 0.8), #f5f5f5 65%);

You can also test this at your end, so always use rgba where ever requires to support maximum browsers in every scenario.

Browser Version I was testing on:

  1. Chrome: 78.0.3904.70
  2. Safari: 12.0.3 (14606.4.5)
  3. Firefox: 70.0.1 (64-bit)

References:

https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

--

--