The captions menu of TimedMediaHandler's beta video player doesn't work properly when the top of it overlaps with the page header; for example, this happens on all file description pages for audio files where there are more than a few caption translations, such as File:Example.ogg. Because the six available skins have very different page headers, there are at least nine different configurations, and the captions menu does not work well with any of them.
| Skin | Issues | Expected behaviour |
|---|---|---|
| Vector | Whole menu is visible but portion of the menu displayed over #mw-head cannot be interacted with | Whole menu should be clickable and should not disappear when cursor is over it |
| Monobook | Part of the menu extends above the viewable portion of the page; portion of the menu displayed over #p-personal cannot be interacted with | Menu should not extend past top of the page; whole menu should be clickable and should not disappear when cursor is over it |
| Monobook (550px or narrower) | The portion of the menu that extends outside #bodyContent is not visible and cannot be interacted with | Whole menu should be visible |
| Cologne Blue | Header text makes some of the captions text difficult to read; portion of the menu displayed over #toplinks cannot be interacted with | Background text should not affect readability; whole menu should be clickable and should not disappear when cursor is over it |
| Modern | Part of the menu extends above the viewable portion of the page; the portion of the menu under #pBody is not visible and cannot be interacted with | Menu should not extend past top of the page; whole menu should be visible and clickable and should not disappear when cursor is over it |
| Minerva | Part of the menu extends above the viewable portion of the page | Menu should not extend past top of the page |
| Minerva (desktop site) | Part of the menu extends above the viewable portion of the page | Menu should not extend past top of the page |
| Timeless | The portion of the menu under #mw-header-container and #mw-header-hack is not visible and cannot be interacted with | Whole menu should be visible |
| Timeless (851px to 1099px) | The portion of the menu under #mw-header-nav-hack and the other header elements is not visible and cannot be interacted with | Whole menu should be visible |
(Minerva – and only Minerva – displays differently depending on whether or not it is used on the mobile site. Timeless has three different header configurations depending on screen width, and Monobook has two.)
The element using the CSS class vjs-menu-content currently has a maximum height of 25em. Reducing the maximum height of the menu would in itself resolve some or all of the issues (depending on the degree of reduction), but I don't think this would be a good solution:
- Because of how much CSS can be input by users, it's very possible that an audio player could be intentionally placed arbitrarily close to the page header or could even be placed over it.
- In any skins with floating headers like Timeless's, the same issues would occur whenever an audio player is displayed close enough to the top of the page.
- Other skins not used on WMF sites may be customized so as to place the audio player much closer to the page header on file description pages or on other pages.