Browser compatibility table row headings disappear if you reveal browser notes

[WebMechanic]

The Browser compatibility table row headings (table.bc-table th) have a (default) vertical alignment of "middle". If the layout of table rows switches from "grid" (narrow page) to "default" (desktop-ish; > 64em) so row headings appear on the left, as a consequence the text inside the th disappears when you twirl open a cell to read the browser notes, i.e. flag, bugs etc.

Open this page and make sure the row headings appear to the left of each property as depicted in the first image, that is min-width:63.9385em :)

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Accessibility_concerns

Scroll down to "display-mode" as an example (or try -webkit-device-pixel-ratio at the end) If you twirl open the notes for Firefox (47) the row header moves downwards and disappears because the row became higher than the inital 2 lines. The TH's default vertical alignment pushes the text underneath the appearing block.

Possible fix: add vertical-align:top

.text-content table.bc-table th {
    text-align: center;
    vertical-align: middle;
}

To my findings this alignment has no effect on the label position in the narrow design using "grid" where row headings appear above the data cells.

Using Win10 with Firefox/74, Nightly/77, Edge/18, ChromeCanary/83 ...

Addendum for EdgeHTML (Edge/18) Also only on wide screens, the position of the twirly triangle is misaligned and appears inside the table cell.

[CITguy]

I just ran into this issue today. Here's a screen capture of the bug in action for the CSS position compatibility table.

[Elchi3]

This looks like a recent regression. (Also, the descriptions are now centered instead of left aligned. Was that change made intentional?)

@atopal Can you prioritize this issue?

[atopal]

Sure, we'll take this into the next triage. Thank you!

[peterbe]

Sure, we'll take this into the next triage. Thank you!

@atopal I put the label back so we don't forget.