HTML popover, videos and display:blackhole
At Barnardo’s, we have a very tight performance budget: All web pages on Barnardo’s products should be less than 100 kilobytes. (This is aspirational rather than a hard rule; as Big Al notes, “To serve users at the 75th percentile (P75) of devices and networks, we can now afford ~150KiB of HTML/CSS/fonts and ~300-350KiB of JavaScript (gzipped)”.)
So while I was prototyping a new project, I decided to use HTML popover to make a ‘lightbox’ when a user clicks on an image or video placeholder to make the media bigger and dim the page behind it. This isn’t quite ready for primetime yet, as it’s not implemented on Safari/Mac, and is still behind a flag in Firefox. But I wanted to kick its tyres because doing something declaratively reduces the amount of JavaScript, leaving more budget for actual content – you know, the thing that the user actually came for.
Also, it’s nice to use a new HTML thingie named after one of my favourite Soviet constructivist artists, Lyubov Sergeyevna Popova (Любо́вь Серге́евна Попо́ва).
As you can see from my popover demo page, it works splendidly for images, with no JavaScript required. Voiceover (on Chrome, as Safari/ Mac doesn’t support it yet) tells me the first image is a button (which it is; popover only works as an attribute on buttons) and that it’s collapsed. Hitting space tells me that the button is expanded, and pressing ctrl+alt+right focusses into the popover, which I can then explore. Hitting esc to dismiss it returns me to the ‘thumbnail’ button, which is announced as once again collapsed.
The video popover is more problematic. All works as expected, but if I start the video and hit esc or click outside the popover to dismiss it, the video disappears from view but the audio continues! Why does the Mr Astley audibly continue to reassure me of his undying devotion and, most importantly, why do those no longer-required bytes keep streaming?
The answer is that when a popover is dismissed, it is set to display:none. Whether the popover spec requires this, or whether that’s just the way the engineers decided to implement it, is unclear to me. You can check that this is how display:none behaves (outside the context of a popover) using this video of Mike Taylr’s legendary Don’t Stop, Donkey Punch video.
As I’m a good web standards wonk, I filed a Chrome bug. I accept that we can’t retrospectively change the behaviour of display:none, as that could break the web. And, as a Chrome engineer pointed out, “one can play audio (or video, e.g., to capture to a canvas) with an element that’s not even plugged into the DOM anywhere”.
So my question is really: should a popover dismissal invoke a special new display mode? display: unperceivable, or display: really-really-none or display: blackhole, or similar? I personally can’t think of a situation in which media showing in a popover should continue playing on dismissal. And if you did want that, you can do it with some JS flim-flam, just as we’ve made popovers for the last 250 years.
But if the point of a declarative standard is to reduce or remove the need for scripting for the most common use-cases, dismissing a video overlay/ lightbox/ popover should default to silencing it and stopping the data transfer, so 99.99% of authors don’t need to write that code.
I’m also told that HTML <dialog> shows the same behaviour if dismissed while an embedded video is playing. There’s an open issue on the HTML spec popover: should audio/video in a popover keep playing after popover is dismissed?, on which you are cordially invited to SPEKE YR BRAINS.
(Last Updated on )
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
But how strong should this blackhole be?
Should the video be completely destroyed, meaning that if the popover shows again, it starts from the beginning, with buffering and whatnot… or should it just be frozen (paused + network activity stopped maybe?)
—
I wonder why dialog is a separate element and popover isn’t.
I don’t like inconsistencies like that. Also, if it were a custom element it could have custom attributes, like an event where we could easily do things like:
<popover onhide="video.pause()"