mediawiki.mixins.less: Do not serve SVG to Opera 12 when fallback available

We support it as a Grade A browser, which means that we should do our
best to provide the best possible experience. In my opinion, the best
possible experience involves not giving it any SVGs.

Opera 12 has issues when rendering SVG background-images together with
border-radius or background-size rules (see task T87504 for details
and examples), and both of these are becoming increasingly common in
our codebase.

Uses in CSS are not worth changing, as they are probably the simple
cases where it works correctly anyway.

Bug: T87504
Change-Id: Icdc2e1dcbcbc356042a064d703e1fe469004280b

diff --git a/RELEASE-NOTES-1.25 b/RELEASE-NOTES-1.25
index 188b2d7..2c42885 100644 (file)
--- a/RELEASE-NOTES-1.25
+++ b/RELEASE-NOTES-1.25
@@ -349,6 +349,8 @@ changes to languages because of Bugzilla reports.
 * Deprecated Revision methods getRawUser(), getRawUserText() and getRawComment().
 * BREAKING CHANGE: mediawiki.user.generateRandomSessionId:
   The alphabet of the prior string returned was A-Za-z0-9 and now it is 0-9A-F
+* (T87504) Avoid serving SVG background-images in CSS for Opera 12, which
+  renders them incorrectly when combined with border-radius or background-size.
 
 == Compatibility ==
 

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index cffa04c..7d4c61c 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -41,6 +41,8 @@
        background-image: url(@fallback);
        background-image: -webkit-linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
        background-image: linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
+       // Do not serve SVG to Opera 12, bad rendering with border-radius or background-size (T87504)
+       background-image: -o-linear-gradient(transparent, transparent), url(@fallback);
 }
 
 .list-style-image(@url) {