Jdlrobson has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/349107 )
Change subject: Restrict lazy loaded images to the viewport ...................................................................... Restrict lazy loaded images to the viewport When lazy loading an image cleanup the dimensions on the lazy loaded placeholder. The width and height that was specified might be larger than the viewport so be careful to restrict both the placeholder and the image inside it once it gets loaded. In addition to this when loading an image we should remove the dimensions that were copied from the placeholder to the image. Otherwise these will conflict with the restriction as inline styles will override any CSS rule. Bug: T154478 Change-Id: I8acec78e09b75112749c82aef118c924ba1d7910 --- M resources/mobile.startup/Skin.js M resources/skins.minerva.content.styles/images.less 2 files changed, 9 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/07/349107/1 diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js index 01e5072..9ccfeb3 100644 --- a/resources/mobile.startup/Skin.js +++ b/resources/mobile.startup/Skin.js @@ -233,7 +233,10 @@ $placeholder.empty().append( $downloadingImage ); // Set the loaded class after insertion of the HTML to trigger the // animations. - $placeholder.addClass( 'loaded' ); + $placeholder.addClass( 'loaded' ) + // Remove width and height properties which have now been copied to the image and + // are surplus to requirements (see https://phabricator.wikimedia.org/T154478) + .css( { width: '', height: '' } ); } ); // Trigger image download after binding the load handler diff --git a/resources/skins.minerva.content.styles/images.less b/resources/skins.minerva.content.styles/images.less index 985b03e..2facf2b 100644 --- a/resources/skins.minerva.content.styles/images.less +++ b/resources/skins.minerva.content.styles/images.less @@ -49,7 +49,11 @@ // Prevent inline styles on images in wikitext // Note we restrict to img's to avoid conflicts with VisualEditor shields // See bug T64460 - a > img { + a > img, + // The lazy image placeholder should be restricted + a > .lazy-image-placeholder, + // ... and then when loaded so should the image inside it (T154478) + a > .lazy-image-placeholder img { // make sure that images in articles don't cause a horizontal scrollbar // on small screens max-width: 100% !important; -- To view, visit https://gerrit.wikimedia.org/r/349107 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I8acec78e09b75112749c82aef118c924ba1d7910 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits