diff --git a/modules/ext.math.js b/modules/ext.math.js index b50b8894c..b3fe74478 100644 --- a/modules/ext.math.js +++ b/modules/ext.math.js @@ -2,6 +2,24 @@ 'use strict'; var img, url; + function insertImg( 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\(\s*(['"]?)([^\1\)]*)\1\s*\)/ )[ 2 ]; + 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' ); + } ); + } + // If MathPlayer is installed we show the MathML rendering. if ( navigator.userAgent.indexOf( 'MathPlayer' ) > -1 ) { $( '.mwe-math-mathml-a11y' ).removeClass( 'mwe-math-mathml-a11y' ); @@ -12,17 +30,9 @@ // We verify whether SVG as 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' ); - } ); + insertImg( true ); + } else if ( $.client.profile().name.match( /msie|edge/ ) ) { + // For all IE versions the meta tags are rendered blurry, while img tags are rendered fine. + insertImg( false ); } }( jQuery ) );