1736914 - Implement prefers-reduced-transparency media query

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Luke Warlow]

Attachment: image (8).png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4664.18 Safari/537.36

Steps to reproduce:

Firefox should add support for the prefers-reduced-transparency media query.

https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-transparency

Actual results:

Not sure on other OSs but macOS and I believe iOS expose an option for reducing transparency. Currently this cannot be applied to web content.

Comment 1

[Virginia (please send need info request to Brindusa Tot)]

Hi Luke,

Thanks for your report.

This could be a good enhancement, hopefully it will be taken into consideration in the future.
I'll add this request to the Firefox: Disability Access component for visibility.

Regards,
Virginia

Comment 2

[Oliver Medhurst [:canadahonk]]

Moved to CSS component as this is where the feature is for. MDN page for prefers-reduced-transparency does not exist yet, PR: https://github.com/mdn/content/pull/25289

Comment 3

[Oliver Medhurst [:canadahonk]]

Attachment: Bug 1736914 - Implement prefers-reduced-transparency media query

Implemented the prefers-reduced-transparency media query for all
platforms.

Windows and Mac have specific settings which are used, others (Android
and Linux/GTK) have it enabled if prefers-reduced-motion is also enabled
as there is no dedicated setting to check.

There are no WPT tests yet, they are added upstream in:
https://github.com/web-platform-tests/wpt/pull/38954
(We would pass all.)

Locked behind new flag layout.css.prefers-reduced-transparency.enabled,
off by default always for now.

Demo video: https://goose.icu/firefox_prt.mp4
Test page: https://goose.icu/prefers-reduced-transparency

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/64ff3b48f4f6
Implement prefers-reduced-transparency media query r=geckoview-reviewers,emilio,jonalmeida,ohall

Comment 5

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/38967 for changes under testing/web-platform/tests

Comment 6

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/64ff3b48f4f6

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 8

[Ryan VanderMeulen [:RyanVM]]

Is this something we wanted to add to the Fx113 release notes?

Comment 9

[Emilio Cobos Álvarez [:emilio]]

It's disabled by default for now (see intent to prototype+ship in dev-platform). So probably not (yet).

Comment 10

[Oliver Medhurst [:canadahonk]]

Indeed, see Bug 1822176 for (potential) enabling and intent to prototype here: https://groups.google.com/a/mozilla.org/g/dev-platform/c/l410J8odZjA/m/5Bdnh9sKBQAJ

Comment 11

[Dipika]

The following issue can be used to track updates on MDN: https://github.com/mdn/content/issues/25773
Thank you CanadaHonk [:canadahonk] for creating the feature page and for updating the browser compat table!!

Comment 12

[Dipika]

Hello CanadaHonk [:canadahonk], could you take a look at the PR you opened for adding the prefers-reduced-transparency page to MDN. The PR is out of draft now and 'ready for review' and there are some comments to be resolved before it can be merged. Thank you!

Comment 13

[Oliver Medhurst [:canadahonk]]

Apologies for the delay, updated now, thanks!

Comment 14

[Dipika]

Thank you so much!