Animated images ignore user's prefers-reduced-motion and Auto-Play preferences

• Component: Images
• Status: NEW ---

[Jeff Johnson]

Created attachment 462360 [details]
Example HTML demonstrating the bug

Steps to reproduce:
1) Open System Preferences, Accessibility pane, Display tab, and enable "Reduce motion"
2) Open Safari Preferences, Websites, Auto-Play, and select "Never Auto-Play"
3) Load the attached "animated-images.html" page

Expected results: The images do not animate.
Actual results: The images do animate.

(The above steps are for Mac. It can also be reproduced on iPhone with similar steps.)

The 3 examples on the page use an mp4 URL for img src, div background-image, and video poster. (I already filed a related bug about videos as video posters: https://bugs.webkit.org/show_bug.cgi?id=239961 "<video> poster attribute allows another video".)

For reference, prefers-reduced-motion is described here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

This disrespect for user preferences has always been a problem with animated GIFs, but animated GIFs predate Safari itself. With the rise of the mobile web, many sites moved away from GIFs because of inefficiency and large file sizes, as explained in the announcement that Safari 11.1 introduced support for mp4 video as an image format: https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/

Safari 16.1 will introduce support for animated AVIF, so this is going to become a larger problem over time. https://developer.apple.com/documentation/safari-release-notes/safari-16_1-release-notes

If other web browsers such as Chrome and Firefox also adopt newer, more efficient animated image formats like mp4, then it's likely that many web sites will switch from <video> elements to <img> elements and background-image attributes. This would take a lot of control away from the user, because animated images do not respect the user's preferences for reduced motion or auto-play. I expect that advertisers are keen on the prospect of unstoppable animated advertisements on the web. Even web browser extensions would have a very difficult time stopping these reliably.

I would also mention that video formats used as images do not have standard native video controls, which again takes away control from users.

The animated GIF problem was largely ignored by browser vendors in the past, but this is now an opportunity for WebKit to rethink the problem and solve it for web users.

[Said Abou-Hallawa]

I think we started addressing this issue in bug 244128.

[Jeff Johnson]

(In reply to Said Abou-Hallawa from comment #1)
> I think we started addressing this issue in bug 244128.

Interesting, thanks! That looks very promising.

I didn't see the bug in my search, but perhaps that's because it's resolved/closed. Should this bug be left open or closed?

[Said Abou-Hallawa]

I think this bug should be left open because your test case has not been fixed. Safari settings need to be propagated to WebKit so we pause the animation.

[Radar WebKit Bug Importer]

<rdar://problem/100281365>

[Sam Sneddon [:gsnedders]]

Similar to bug 168985, this should probably also be impacted by low power mode. It would be odd if a muted AV1 video would not play but an animated AVIF would play, assuming both formats were supported.