Search code examples
csssafariautoprefixer

grunt-postcss autoprefixer not adding -webkit-linear-gradient for background


I just started using grunt-postcss autoprefixer to help me out with browser compatibility, but I noticed that it does not always work.

Specifically, some elements of my page use:

background: linear-gradient(red, blue);

Colors changed for simplicity. This works fine in Chrome, but not Safari. Safari requires:

background: -webkit-linear-gradient(red, blue);

You can check this by visiting my fiddle (https://jsfiddle.net/vz6gjety/1/) using chrome and then safari.

However, grunt-postcss autoprefixer does not catch this and does not add the prefix. Is this a limitation of the Can I Use database? I would post to what I can find there but I do not have enough reputation yet.


Solution

  • Alexander O'Mara was kind enough to point out that as I'm on Windows, I'm using an extremely outdated version of Safari:

    According to MDN, Safari hasn't required it since 5.1. Since only Windows-based web developers actually use Safari 5.1 (the last version Apple released for Windows before abandoning it), you would probably have to adjust the auto-prefix settings to include this obsolete browser if you still want it prefixed.