Set the display brightness to less than 100%.
Turn off Low Power Mode on iOS.
The RGB color values of the message and the background are the same.
Take a screenshot then compare them in an image editor.
Your experience may vary depending on browser, OS version, display, everything.
Tests so far seem to indicate this only works on the Apple platforms.
Test Results
Works with HDR-capable Macs and iPhones:
- Safari / Chrome / Edge, macOS Big Sur, MacBook Air (M1, 2020)
- Safari, macOS Big Sur, MacBook Pro (15-inch, 2018)
- Safari, macOS Big Sur, MacBook Pro (16-inch, 2019)
- Safari, macOS Big Sur, iMac (Retina 5K, 27-inch, 2020)
- iOS 14, iPhone X
- iOS 14, iPhone XS / XR
- iOS 14, iPhone 12 / iPhone 12 Pro
- iOS 14, iPad Pro 11-inch (2nd generation)
Works with SDR Macs with Blink browsers:
- Chrome / Edge, macOS Big Sur, iMac (Retina 5K, 27-inch, Late 2015)
Does not work with:
- Firefox (Does not support HDR)
- webOS TV (Does not support backdrop-filter)
- Chrome, Google Pixel 4a
- Edge, Samsung Galaxy S10
- PlayStation 4
- Xbox Series X (Might crash the console)
- Chrome, Windows 10, LG 27UK600 / LG 34WL600
How does this work?
There are hidden HDR videos playing at the corners of this page. When a HDR-capable browser encounters one, it switches to HDR mode. For some reason, CSS backdrop-filter + brightness >100% combo seems to behave like HDR—reaching beyond the user-controlled display brightness, up to the maximum HDR brightness—while the everything in between follow along. At least that’s the overall idea, but I still don’t know exactly why it works; especially why with those two CSS properties.
Once the system switches to HDR mode, it seems to affect the whole display. That says, as long as you can trigger HDR mode by any means—simply playing an HDR video on Movist, for example—the CSS trick works on Safari / Chrome / Edge with HDR-capable / SDR devices. This indicates this bug/feature is mostly tied to the EDR system.
Project on GitHub. Short URL fff.kidi.ng.
Created by kiding. Inspired by zvuc.
