From d93efc2edab2c05f8599b8103e5b2ebee9f91c7d Mon Sep 17 00:00:00 2001 From: William Desportes Date: Sat, 16 May 2020 10:54:26 +0200 Subject: [PATCH] Fix Missing vendor-prefixed CSS gradients for Old Webkit (Safari 4+, Chrome). Why is this an issue? CSS gradients in a cross-browser way requires using many different vendor-prefixed versions. There are currently five different vendor-prefixed versions of CSS gradient: -ms-linear-gradient and -ms-radial-gradient for Internet Explorer 10+ -moz-linear-gradient and -moz-radial-gradient for Firefox 3.6+ -o-linear-gradient and -o-radial-gradient for Opera 11.10+ -webkit-linear-gradient and -webkit-radial-gradient for Safari 5+ and Chrome -webkit-gradient for Safari 4+ and Chrome (aka "Old WebKit") Meaning a simple two-color gradient that works across all browsers must look like this: background: -moz-linear-gradient(...); /* FF3.6+ */ background: -webkit-gradient(...); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(...); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(...); /* Opera 11.10+ */ background: -ms-linear-gradient(...); /* IE10+ */ It's easy to forget one or more gradient definitions with all of the various vendor prefix gradients available. [By Codacy] Signed-off-by: William Desportes --- setup/styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/setup/styles.css b/setup/styles.css index 8893b5375a..f57550de52 100644 --- a/setup/styles.css +++ b/setup/styles.css @@ -459,6 +459,7 @@ input.button { text-shadow: 0 1px 0 #fff; background-image: url(../themes/svg_gradient.php?from=ffffff&to=cccccc); background-size: 100% 100%; + background: -webkit-gradient(top, #fff, #ccc); background: -webkit-linear-gradient(top, #fff, #ccc); background: -moz-linear-gradient(top, #fff, #ccc); background: -ms-linear-gradient(top, #fff, #ccc); @@ -473,6 +474,7 @@ input.button:hover { position: relative; background-image: url(../themes/svg_gradient.php?from=cccccc&to=dddddd); background-size: 100% 100%; + background: -webkit-gradient(top, #ccc, #ddd); background: -webkit-linear-gradient(top, #ccc, #ddd); background: -moz-linear-gradient(top, #ccc, #ddd); background: -ms-linear-gradient(top, #ccc, #ddd);