Jhernandez has uploaded a new change for review. https://gerrit.wikimedia.org/r/294689
Change subject: Fix reflow from lazy loaded images improvements ...................................................................... Fix reflow from lazy loaded images improvements See T135430#2384461 The link that wraps all images is an inline element and if the children is not a block it will change it's size. Before this didn't happen because we had overflow:hidden which hid the extra space keeping the element unchanged. This patch makes the placeholder a block, like the inside image that will load is, making it unnecessary to bring back overflow:hidden Bug: T135430 Change-Id: I0bd6676a523669d47fede7714db3ab4b7b24fa4a --- M resources/skins.minerva.base.styles/images.less 1 file changed, 3 insertions(+), 1 deletion(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/89/294689/1 diff --git a/resources/skins.minerva.base.styles/images.less b/resources/skins.minerva.base.styles/images.less index e8aab2d..42f5d3e 100644 --- a/resources/skins.minerva.base.styles/images.less +++ b/resources/skins.minerva.base.styles/images.less @@ -12,7 +12,9 @@ background-color: @placeholderBackgroundColor; - display: inline-block; + // In order to avoid reflows placeholder needs to be block, or + // inline-block+overflow:hidden given it is nested inside an inline <a> + display: block; // When inserted, don't show the image because we want to animate it img { -- To view, visit https://gerrit.wikimedia.org/r/294689 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I0bd6676a523669d47fede7714db3ab4b7b24fa4a Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: Jhernandez <jhernan...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits