Let's talk about the unclear documentation of Safari's Low Power Mode.
Here are some steps to get started:
- Log in to developer.apple.com
- Go to https://developer.apple.com/download/more/
- Download "Additional Tools for Xcode12"
- Open "Quartz Debug" in the Graphics folder.
- In the menu bar, click Tools -> Enable Quartz Debug. Then, Tools -> Show detached regions.
- Your screen should now be tinted red. If your screen becomes normal color, it means low power mode is working.
- In Safari, start playing a video (it should be red tinted)
- Go to full screen and wait for the controls to decay. If there is nothing else on the screen other than the video it should be back to normal colors indicating that Safari is successfully playing in low power mode.
(This might seem backwards, but low power mode is basically the idea that nothing on the screen is rendering other than the video. The the red overlay is rendering, then that is the indication that other non-video things are rendering as well.)
Things you need to know if you are going to test or implement this:
- You can't have multiple monitors connected.
- It only works when the video is playing. If the video is paused, it will not be in low power mode.
- The full screen element needs to have a `background-color: transparent`. Even though it is the default, it needs to be explicitly declared. The documentation says it needs to be `black`. This is wrong.
- Parent nodes of the video node, up to the full screen element need to have no background-color defined or defined as transparent.
- Other html elements that exist within the full screen element and on top of the video element need to have a display:none. Empty nodes will cause it to NOT go into low power mode.
- It will fail to go into low power mode if the page has a warning or error that displays over the window, not in the console, even if this error is not seen in full screen mode. For example, "This webpage is using a significant amount of memory, closing it may improve performance".
