Fixes #4628 Remove decoding attribute and triggering a layout reflow to fix rendering issues on WebKit

[Jeroen-1978]

Description

Fixes #4628

This pull request introduces targeted fixes to the lazy loading behavior for images, addressing rendering stalls and repaint issues. The main changes focus on improving image loading reliability and ensuring images are properly displayed after their sources are set.

This is a known WebKit compositing/rendering behavior where programmatic attribute changes on elements that were initially decoded asynchronously do not always trigger a paint update.

Type of change

• Bug fix (non-breaking change which fixes an issue).

Detailed scenario

What was tested

As described in Issue.

To make sure this is realy a WebKit problem I tested several Browsers on several platforms. All using the most recent version available.

Browsers & platforms tested

Browser	Engine	Version	Platform	Affected
Safari	WebKit	18.3	macOS Sequoia 15.3	Yes
Safari	WebKit	18.3	iOS 18.3	Yes
Chrome	Blink	13.3	macOS Sequoia 15.3	No
Chrome	Blink	133	Windows 11	No
Chrome	Webkit	133	iOS 18.3 (WKWebView/WebKit)	Yes
Firefox	Gecko	135	macOS Sequoia 15.3	No
Firefox	Gecko	135	Windows 11	No
Firefox	WebKit	135	iOS 18.3 (WKWebView/WebKit)	Yes
Edge	Blink	133	macOS Sequoia 15.3	No
Edge	Blink	133	Windows 11	No
Edge	Webkit	133	iOS 18.3 (WKWebView/WebKit)	Yes

Note: On iOS, all browsers are required by Apple to use WebKit as their underlying engine (WKWebView). This means Chrome, Firefox, and Edge on iOS are all affected, confirming that the root cause is WebKit itself, not a browser-specific issue.

How to test

As described in Issue.

Technical description

Documentation

Rendering and repaint improvements:

• Removed the decoding="async" attribute from images before setting their sources to prevent rendering stalls during lazy loading.
• Added logic to force a browser repaint after changing an image's src programmatically, which fixes cases where the image is loaded but not visually rendered (e.g. in Safari). This includes removing the decoding attribute and triggering a repaint via an opacity change combined with requestAnimationFrame, avoiding forced synchronous layout (layout thrashing).

New dependencies

None.

Risks

None.

Mandatory Checklist

Code validation

• I triggered all changed lines of code at least once without new errors/warnings/notices.

Code style

• I wrote a self-explanatory code about what it does.
• I did not introduce unnecessary complexity.

Unticked items justification

None

Additional Checks

• In the case of complex code, I wrote comments to explain it.
• When possible, I prepared ways to observe the implemented system (logs, data, etc.).
• I added error handling logic when using functions that could throw errors (HTTP/API request, filesystem, etc.)

[Copilot]

Pull request overview

This pull request addresses Safari iOS rendering issues where lazy-loaded images below the fold fail to display, even though the DOM shows the image replacement is functioning correctly. The fix implements two changes to the lazyload library (version 17.8.3): removing the decoding="async" attribute before setting image sources, and forcing a browser repaint after programmatic source changes.

Changes:

• Removes decoding attribute in setSourcesImg() before setting image attributes to prevent render stalls
• Adds repaint logic in loadHandler() that removes decoding, toggles display style, and triggers reflow for IMG elements