Bug 283894 – Web Inspector: Reduce motion pref is not working on SVG image loaded through background images

• Status: NEW
• Component: Web Inspector

[Karl Dubost]

1. With Safari TP 208 on macOS 15.2
2. Go to https://www.24joursdeweb.fr
3. Notice the christmas decorations slowly moving
4. open the Web Inspector, go to Elements Tab
5. Click on the icon to change theme, motion, etc.
6. Activate Reduce motion at on.

Expected: Movement stops.

Actual: Movement continues

7. Go to https://www.24joursdeweb.fr/assets/images/header/2024/header.svg (activate reduce motion is stil on in the web inspector)
8. The decorations are not moving.
9. Set Reduce Motion at off
10. The decorations are moving.


The image is called in the HTML by 

```
.home--2024 .hero {
    background: transparent url(/assets/images/header/2024/header.svg) no-repeat 0% 2rem / 240vw auto;
    contain: content;
    overflow: hidden;
}
```

[Radar WebKit Bug Importer]

<rdar://problem/140776212>

[Karl Dubost]

Created attachment 473419 [details]
webarchive of current site.

[Anthony Ricaud]

There are two kinds of animations on this page :
- The decoration in each articles is animated by CSS that is present in the HTML. Those animations respect both the System and Devtools prefers-reduced-motion setting.
- The decorations in the header are animated by CSS that is within the SVG. Those animations respect the System prefers-reduced-motion setting but not the Devtools one.

I suspect the cause of the bug lies in the way the Devtools override is implemented : maybe it only overrides the main document and does not forward it to the SVG.

[Razvan Caliman]

> I suspect the cause of the bug lies in the way the Devtools override is implemented : maybe it only overrides the main document and does not forward it to the SVG.

That is likely. The override applies when Inspecting the SVG document directly (https://www.24joursdeweb.fr/assets/images/header/2024/header.svg) but not when it's embedded into the HTML document.

Setting the override is done in `InspectorPageAgent::overridePrefersReducedMotion()` 
https://github.com/WebKit/WebKit/blob/e666928e70449224996d14a5868c902134facf30/Source/WebCore/inspector/agents/InspectorPageAgent.cpp#L540-L550

which writes it to the `Page`s  `Settings` object.

https://github.com/WebKit/WebKit/blob/e666928e70449224996d14a5868c902134facf30/Source/WebCore/testing/InternalSettings.cpp#L394-L397

The animations in the SVG document are CSS-based so they should respect the `prefers-reduced-motion` media feature which reads the value from the settings, `frame->settings().forcedPrefersReducedMotionAccessibilityValue()`:

https://github.com/WebKit/WebKit/blob/e666928e70449224996d14a5868c902134facf30/Source/WebCore/css/query/MediaQueryFeatures.cpp#L539-L562

I suspect the embedded SVG document is treated as a different "frame" which doesn't read the override from the host HTML document `Settings`. That might explain why the override works when inspecting it directly but not when it's embedded.

[Gaël Poupard]

As I refactored the example on 24joursdeweb.fr, I made a reduced test case on CodePen for each way to embed an SVG in a document: inlined, through an img element, or as a background-image.

https://codepen.io/ffoodd/pen/QwLNYpr

I used the original SVG but needed to encode it in order to embed it as data URI src or background-image, the page is quite heavy.