wikimedia/mediawiki-extensions-Math
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Math synced 2024-11-24 07:34:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use img element to display SVGs in new IEs

Browse source 
InternetExplorer versions that do support SVG images
have problems rendering  these in meta tags.
Replacing meta tags with img elements resolves the problem.

Bug: T132491
Change-Id: I353e911a8e2066c10d8df583cae88861a8623816
This commit is contained in:
physikerwelt 2016-04-12 16:27:02 -04:00 committed by Mobrovac
parent 9b9e135b4b
commit 0b17471332
1 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
modules/ext.math.js
View file

@ -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 <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' );
} );
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 ) );