Physikerwelt has uploaded a new change for review.
https://gerrit.wikimedia.org/r/283010
Change subject: Use img element to display SVGs in new IEs
......................................................................
Use img element to display SVGs in new IEs
InternetExplorer version that do support svg images
have problem to render theses images in meta tags.
Replacing meta tags with img element resolves the problem.
Bug: T132491
Change-Id: I353e911a8e2066c10d8df583cae88861a8623816
---
M modules/ext.math.js
1 file changed, 28 insertions(+), 18 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Math
refs/changes/10/283010/1
diff --git a/modules/ext.math.js b/modules/ext.math.js
index b50b889..e672adf 100644
--- a/modules/ext.math.js
+++ b/modules/ext.math.js
@@ -1,28 +1,38 @@
-( function ( $ ) {
+( function ($) {
'use strict';
var img, url;
// If MathPlayer is installed we show the MathML rendering.
- if ( navigator.userAgent.indexOf( 'MathPlayer' ) > -1 ) {
- $( '.mwe-math-mathml-a11y' ).removeClass(
'mwe-math-mathml-a11y' );
- $( '.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display' ).css( 'display', 'none' );
+ if (navigator.userAgent.indexOf('MathPlayer') > -1) {
+ $('.mwe-math-mathml-a11y').removeClass('mwe-math-mathml-a11y');
+ $('.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display').css('display', 'none');
return;
}
+ var insertImg = function (png) {
+ $('.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display').each(function () {
+ // Create a new image to use as the fallback.
+ img = document.createElement('img');
+ url =
this.style.backgroundImage.match(/url\(['"]?([^'"]*)['"]?\)/)[1];
+ if (png) {
+ url = url.replace('media/math/render/svg/',
'media/math/render/png/');
+ }
+ img.setAttribute('src', url);
+ img.setAttribute('class', 'tex
mwe-math-fallback-image-' + (
$(this).hasClass('mwe-math-fallback-image-inline') ? 'inline' : 'display' ));
+ img.setAttribute('aria-hidden', 'true');
+ this.parentNode.insertBefore(img, this);
+
+ // Hide the old SVG fallback.
+ $(this).css('display', 'none');
+ });
+ };
+
// We verify whether SVG as <img> is supported and otherwise use the
// PNG fallback. See
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/svg/asimg.js
- if ( !document.implementation.hasFeature(
'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
- $( '.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display' ).each( function () {
- // Create a new PNG image to use as the fallback.
- img = document.createElement( 'img' );
- url = this.style.backgroundImage.match(
/url\('?([^']*)'?\)/ )[ 1 ];
- img.setAttribute( 'src', url.replace(
'media/math/render/svg/', 'media/math/render/png/' ) );
- img.setAttribute( 'class', 'tex
mwe-math-fallback-image-' + ( $( this ).hasClass(
'mwe-math-fallback-image-inline' ) ? 'inline' : 'display' ) );
- img.setAttribute( 'aria-hidden', 'true' );
- this.parentNode.insertBefore( img, this );
-
- // Hide the SVG fallback.
- $( this ).css( 'display', 'none' );
- } );
+ if
(!document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image',
'1.1')) {
+ insertImg(true);
+ } else if ($.client.profile().name.match(/msie|edge/)) {
+ // For IE the all versions meta tags are rendered blury while
img tags are rendered fine
+ insertImg(false)
}
-}( jQuery ) );
+}(jQuery) );
--
To view, visit https://gerrit.wikimedia.org/r/283010
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I353e911a8e2066c10d8df583cae88861a8623816
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Math
Gerrit-Branch: master
Gerrit-Owner: Physikerwelt <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
