Page MenuHomePhabricator

Lazy loaded images: Load styles for .lazy-image-placeholder only if 'MobileFrontend' is loaded
Closed, ResolvedPublic

Description

Following the conversation in T199351: Lazy loaded images: Lazily loaded inline images cause reflow - should retain other classes such as `thumbborder`

Developers note:

Minerva operates in desktop and mobile mode. You can add to resources/skins.minerva.base.styles/images.less yes but it would mean the styles unnecessarily apply to desktop too.
e.g. https://en.wikipedia.org/wiki/Dog?useskin=minerva as well as https://en.m.wikipedia.org/wiki/Dog

The benefit of styles is you can avoid loading unnecessary styles.

It's actually a bug that those styles live in resources/skins.minerva.base.styles/images.less - they should be skin styles. For a third party who doesn't install MobileFrontend those rules are always unused for example.

Notes:

Css for noscript like this:

noscript > img {
	// make sure that images in articles don't cause a horizontal scrollbar
	// on small screens
	max-width: 100% !important;
}

also might be related to lazy loading and likely be moved to conditionally loaded:

Acceptance criteria:

  • no .lazy-image-placeholder class styles to be added to css when MobileFrontend is turned off
  • .lazy-image-placeholder class styles should be added to css when MobileFrontend is turned on

Event Timeline

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptAug 14 2020, 7:33 AM

Change 620286 had a related patch set uploaded (by Peter.ovchyn; owner: Peter.ovchyn):
[mediawiki/skins/MinervaNeue@master] Move css styles related to lazy-image-placeholder to skinStyles

https://gerrit.wikimedia.org/r/620286

Change 620286 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Move css styles related to lazy-image-placeholder to skinStyles

https://gerrit.wikimedia.org/r/620286

Jdrewniak closed this task as Resolved.Aug 27 2020, 1:24 PM
Jdrewniak updated the task description. (Show Details)