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
