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, wellat 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:
- Chrome: 78.0.3904.70
- Safari: 12.0.3 (14606.4.5)
- Firefox: 70.0.1 (64-bit)
Contact Taksa for your Outsourcing Design Project requirements and see how our designers incorporate such extraordinary UI/UX design principals and tactics into your project for great product success and seemless experience across multiple browsers.
Originally Published on Medium
