Closed Bug 1426644 Opened 7 years ago Closed 3 years ago

[Twitch] The last names inside the “Viewer list” are not completely visible

Categories

(Web Compatibility :: Desktop, defect, P3)

Product:
Web Compatibility
Component:
Desktop
Type:
defect

Tracking

(platform-rel +)

Status:
RESOLVED FIXED
Tracking Flags:
Tracking Status
platform-rel --- +

People

(Reporter: asoncutean, Unassigned)

References

Details

(Keywords: webcompat:site-wait, Whiteboard: [sitewait][platform-rel-Twitch])

Attachments

(1 file)

screenshot after scrolling to bottom of viewer list (note, nothing is clipped at the bottom)
(deleted), image/png
Details
[Affected versions]: - Nightly 59.0a1 - Firefox 58.0b11 - Firefox 57.0.2 [Affected platforms]: - Win 10 x64 - Ubuntu 16.04 x32 - macOS 10.12 [Steps to reproduce]: 1. Go to https://www.twitch.tv/ 2. Choose a live video with around 90-100 viewers 3. Click on the “Viewer list” button (bottom right) 4. Scroll down through the "Viewer list" names till the last one 5. Observe the end of the list [Expected result]: - All names in the "Viewer list" are visible [Actual result]: - The "Viewer list" is not entirely visible (the last name is missing and the penultimate name is cut off) [Regression range]: - This seems to be an old regression: Last good revision: 63f44b4968c2 (2014-07-22) First bad revision: 82df3654cd80 (2014-07-23) Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=63f44b4968c2&tochange=82df3654cd80
From a brief look at the site, and considering the regression range, I suspect this is a Flexbox issue rather than Text. Maybe triggered by bug 1037177, or one of the other flexbox-related bugs that landed about the same time? :dholbert, could you possibly take a look? Thanks!
Severity: minor → normal
Component: Layout: Text → Layout
Flags: needinfo?(dholbert)
Here is the screencast for this issue: https://goo.gl/dSd4mB
Thanks for the bug report and the screencast! I agree with Jonathan - definitely seems likely related to the flex changes there (which was adding back min-width/min-height:auto support, which did trigger lots of webcompat pain and which isn't implemented 100% interoperably due to bugs in all browsers & spec changes). I've got a somewhat reduced testcase; reducing further to see what's going on.
I can reproduce the exact same issue using Microsoft Edge 16, too, which leads me to believe this is a bug in Chrome that Twitch is accidentally depending on.
Yeah, this goes away if I add "min-height:0" to inner element here (the one with "tw-full-height"): > <div class="chat-viewers__pane tw-right-0 tw-bottom-0 tw-left-0 tw-flex tw-flex-column tw-flex-nowrap tw-absolute"> > ... > <div class="tw-full-height tw-flex tw-flex-column tw-flex-nowrap"> It's appropriate that we're making that element have a super-tall resolved min-height:auto, because it has a descendant with very tall contents (which happens to be scrollable, but sadly that doesn't help with min-height:auto resolution). Its tall min-height:auto is a bit smaller due to the presence of "height: 100%" on this tw-full-height element (since 'height' puts an upper-bound on what min-height:auto should resolve to). But that's not sufficient to avoid this issue, because this tw-full-height has some siblings, which means 100% of its parent's height is *still* too tall for everything to fit. So: we should reach out to twitch and suggest that they adjust this tw-full-height element to have "min-height:0". Without that tweak, they're relying on the Chrome bug linked in comment 5.
Blocks: minsizeauto-fallout
Component: Layout → Desktop
Flags: needinfo?(dholbert)
Product: Core → Tech Evangelism
Status: UNCONFIRMED → NEW
Ever confirmed: true
CC'ing Szatmary who helped out in another Twitch-related bug (bug 1417869) -- Szatmary, any chance you could look into this or direct it to someone who could? See attached screencast to see the bug -- this is a case where Twitch is accidentally depending on a Google Chrome bug to get correct layout, and Firefox/Edge are getting broken layout as a result. This CSS rule is sufficient to fix the bug (though you may want a different selector depending on how you want to target it): .chat-viewers__pane > .tw-full-height { min-height: 0; } (You can test this rule locally in Firefox via DevTools style editor (F12, click "Style Editor Tab", & just paste that ^ into some arbitrary stylesheet). Or you can test it via creating a twitch.tv domain-specific rule using the "Stylus" add-on at https://addons.mozilla.org/en-US/firefox/addon/styl-us/ )
Flags: needinfo?(m3u8)
See Also: → https://bugs.chromium.org/p/chromium/issues/detail?id=596743
(er, by "see attached screencast" I meant "see screencast in comment 2")
Contacted via internal mailing list.
Whiteboard: [sitewait]
platform-rel: --- → +
Whiteboard: [sitewait] → [sitewait][platform-rel-Twitch]
Priority: -- → P3
Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Keywords: webcompat:site-wait

I just retested this and I can confirm it's no longer reproducible. Twitch has redesigned this UI a bit, and now the "Viewer List" button is at the top-right -- not bottom-right -- and when you've clicked it, it's now possible to scroll to the end of the viewer-list. (Verified using a stream with ~100 viewers.)

Status: NEW → RESOLVED
Closed: 3 years ago
Flags: needinfo?(m3u8)
Resolution: --- → FIXED

Here's a screenshot of what I'm seeing now. Note that you can't see the scrollbar here since this site uses overlay scrollbars.

Interestingly, when the scrollbar is visible, you can actually see that it does get clipped at the bottom -- i.e. you can scroll the scrollbar itself off-the-viewport a bit. That happens in Chrome as well, though, so it's not a Firefox-specific issue. (And fortunately no actual content is clipped, because Twitch has added some padding at the bottom of this area, presumably to compensate for this.)

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: