Closed
Bug 1249227
Opened 9 years ago
Closed 9 years ago
EME spec doesn't lay out inside of sidebar newly added to spec
Categories
(Core :: Layout, defect)
Core
Layout
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: cpearce, Unassigned)
Details
If you look at the latest draft of the Encrypted Media Extensions spec, you'll see they have added a sidebar that floats over top of the text of the spec. This means you can only read half of the spec at once. In Chrome the sidebar doesn't float, so all text of the spec is visible.
https://w3c.github.io/encrypted-media/#toc
|
||
Comment 1•9 years ago
|
||
Do you have the same exact window widths and font sizes in Chrome and Firefox?
The relevant markup on the site is this:
<body class="toc-sidebar">
once the window is wide enough. Looks like it dynamically switches that from <body class="toc-inline"> and does so like this, in <https://www.w3.org/scripts/TR/2016/fixup.js>:
var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
if(sidebarMedia.addEventListener) {
sidebarMedia.addEventListener('change', function(e){toggleSidebar(e.matches);}, false);
} else if(sidebarMedia.addListener) {
sidebarMedia.addListener(function(e){toggleSidebar(e.matches);});
}
toggleSidebar(sidebarMedia.matches);
this part happens in both Chrome and Firefox. So the TOC will be inline (coming before the spec text) unless the window width is 78em or more; once that point is reached it will be changed to a sidebar.
Now there _is_ a way to trigger the sidebar when the window width is less than 78em. That's by clicking the "←" that appears at the very beginning of the page, above the big "Encrypted Media Extensions" title. In this case the sidebar will open and overlap the spec text, but auto-close when you click anything in it.
Before I start analyzing the details of their stylesheets (the relevant one is <https://www.w3.org/StyleSheets/TR/2016/base.css>), what does this return for you on the site in question in Firefox and Chrome:
window.matchMedia('screen and (min-width: 78em)').matches
? What does this return:
document.body.className
?
Flags: needinfo?(cpearce)
|
|
||
Comment 2•9 years ago
|
||
I guess also of possible interest is:
window.matchMedia('screen and (min-width: 90em)').matches
since that also affects some of the styles. But I don't think it should make a big difference in the layout.
|
Reporter | |
Comment 3•9 years ago
|
||
This was on my Retina MBP 13", so maybe it's caused by the high DPI display? However, today I see the same behaviour in Chrome and in Firefox...
(In reply to Boris Zbarsky [:bz] from comment #1)
> Do you have the same exact window widths and font sizes in Chrome and
> Firefox?
Testing today yes. Window maximized. May not have been when I originally reported the bug however.
> what does this return
> for you on the site in question in Firefox and Chrome:
>
> window.matchMedia('screen and (min-width: 78em)').matches
true, in both Firefox and Chrome, with the app windows are maximized.
> ? What does this return:
>
> document.body.className
"h-entry toc-sidebar", in both Firefox and Chrome, with the app windows are maximized.
I think I must have just been confused by the sidebar behaviour and assumed it was a bug in Firefox... So I'll go ahead and close this bug...
Status: NEW → RESOLVED
Closed: 9 years ago
Flags: needinfo?(cpearce)
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•