Bug 224547

Summary:

Images and iframes with attribute loading=lazy do not print if not viewed (scrolled to) first

Product:

WebKit

Reporter:

groek_de_bc

Component:

Images

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

cdumez, changseok, esprehn+autocc, ews-watchlist, gyuyoung.kim, hartman.wiki, kangil.han, koivisto, rbuis, sabouhallawa, simon.fraser, thorton, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

See Also:

https://bugs.webkit.org/show_bug.cgi?id=208094

Attachments:

Description	Flags
Patch	none

Description groek_de_bc 2021-04-14 08:08:03 PDT

* SUMMARY
Lazy loaded images and iframes that have not been on screen yet, are not loaded when printing, producing empty elements.

* STEPS TO REPRODUCE
1. Open Safari/WebKit.
2. Enable lazy loading of images in the Experimental features.
3. Visit a page that contains lazy loaded images or iframes that are not visible on page load (i.e. below the fold).
4. Print the page

* EXPECTED RESULTS
All images should be visible in the printed version

* ACTUAL RESULTS
Only images that were already loaded before executing the print command are visible. 

* REGRESSION
I think this never worked.

* TEST CASE
https://www.ecb.europa.eu/lazy-loading-test/

Printing this page should show the numbers 1 through 6. 

* RELATED LINKS
https://github.com/whatwg/html/issues/6581

Comment 1 Radar WebKit Bug Importer 2021-04-21 08:08:15 PDT

<rdar://problem/76959554>

Comment 2 Rob Buis 2021-09-30 07:33:35 PDT

Created attachment 439736 [details]
Patch

Comment 3 Derk-Jan Hartman 2023-11-21 07:15:42 PST

This bug still exists. The same issue in Chrome was fixed in January of 2022 https://bugs.chromium.org/p/chromium/issues/detail?id=875403

This is currently blocking Wikipedia (esp Desktop) from using the native attribute, as people still want to print Wikipedia and expect that to work.


I even tried something like:
<script>
window.onbeforeprint = () => {
	console.log( 'print' )
	document.querySelectorAll( 'img' ).forEach( (elem, index) => {
		elem.removeAttribute( 'loading' );
	})
}
</script>

But it seems that this is only processed async, and the print still misses images.

Related wikipedia ticket: https://phabricator.wikimedia.org/T148047