Html: Bad UX of overlapping “Support:” (caniuse.com) popups makes collapsing impossible

[sideshowbarker]

1. Open https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer
   You’ll see a Support: popup with data from caniuse.com

2. Use the (tiny) collapse control in the upper-right corner of the popup to (attempt to) collapse it.
   …but there’s still a popup there and you have no way to make it go away.

The cause seems to be, we have two terms async and defer on the same line in the spec, and we have caniuse.com data for both, so we end up with two popups getting rendered on top each other.

When you use the collapse control for the upper (z-index) one, it collapses as expected but that just reveals the other one below it—but now the collapse control for the upper one is still there, covering the collapse control for the lower one. So you have no way to make the lower one collapse.

[annevk]

We should also maybe move that collapse control to the other side, since the scrollbar can obscure it.

[annevk]

It should maybe use <details>. I think that's in a few browsers now.

[zcorpan]

It's also annoying that it overlaps the text to begin with. We could tweak the padding on body to maybe reduce it on the left side and increase it on the right side.

[annevk]

This duplication also happens at https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element due to open spec bugs.

I found that through manipulating Wattsi so I can probably solve this somehow, but we have to decide on the output we want. A single <div class=status> with multiple <details> descendants?

[annevk]

Ah, the reason it happens for the video element is because of differing IDs. That could be solved by just changing the entries in Bugzilla too.

[rolfen]

Same issue here. Unable to collapse popup, which blocks text.
The "Support" box show be floated within the flow so that text flows around it.

[zcorpan]

This should be fixed now.