1673291 - Video is not properly resized after modifying the window size

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Karl Dubost💡 :karlcow]

Steps to reproduce:

1. Go to https://www.twitch.tv/videos/781159043
2. Start the live stream
3. Hide and show the side chat (nothing strange is happening)
4. Command+ shift + R (macos) or Ctrl+Shift+ R on (windows)
5. Resize the window and/or hide/show the side chat

Expected:
Video is occupying the full available space

Actual:
The space is sometimes leaves a large black bleeding around the video.

This was initally reported on https://webcompat.com/issues/60183

It could be a performance issue. But not sure if it's the right component for it.

It doesn't reproduce in Chrome Canary latest version
Version 88.0.4303.0 (Build officiel) canary (x86_64)

This was tested in Firefox Nightly 84.0a1 (2020-10-25) (64-bit)

Comment 1

[Bryce Seager van Dyk [:bryce] (he/him) - Not reading bugmail]

Attachment: bug1673291Repro.mp4

Attaching a recording showing the issue -- it's low frames per second, but shows the issue. We expect the video to be centered horizontally and vertically, and to expand to take up space as needed without changing aspect ratio. However, you can see 2 issues

• After opening and closing the chat (around 6 seconds into the recording) the video is aligned to the left -- the black box/letterboxing is entirely to the right of the video, rather than equally to the left and right.
• After resizing the window and opening and closing chat (around 17 seconds into the video) the video is aligned to the top left -- the black boxes/letterboxing is now entirely to the left and below the video rather than the video being resized to take up the available space and being centered.

This doesn't look like a regression, I've gone back 2 years and see similar behaviour. I wonder if this is a result of a change on twitch's end, as I'm fairly sure this has not been happening for years.

Comment 2

[Bryce Seager van Dyk [:bryce] (he/him) - Not reading bugmail]

I'm not sure what the problem is here. It seems like a layout thing, but don't know if twitch are doing something exotic in JS that could impact this. The video itself is not having issues playing, so there's not much we can do in media. Moving to layout in the hopes there's more knowledge to diagnose this further.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

(In reply to Bryce Seager van Dyk (:bryce) from comment #2)

I'm not sure what the problem is here. It seems like a layout thing, but don't know if twitch are doing something exotic in JS that could impact this.

I'd bet it. I haven't looked what twich is doing in JS at the moment, I can see max-width: calc(100% - 340px); and the original style was max-width: calc(100% + 0px);.

So the question is why it works as twich expected on Chome. Karl, have you tried to see what exact JS runs at the moment when hiding the side chat?

Comment 4

[Karl Dubost💡 :karlcow]

Expanding or collapsing the chat side is done by
https://static.twitchcdn.net/assets/core-dc65022f23a5bffd25b1.js

function N(e, t, n) {
  var i = !e || window.innerWidth < 920,
    a = Math.min(n.height, window.innerHeight - S),
    r = n.width / a > _,
    o = r ? a * _ : n.width;
  return {
    hasBlackFill: r,
    scaleVideo:
      window.innerWidth < 768
        ? g.a / a
        : Math.max(O / o, O / t.width, t.width / o) || 1,
    videoWidth: o,
    chatCollapsed: i,
  };
}


function I(e) {
  var t = e.mainRef.getBoundingClientRect(),
    n = e.contentRef.getBoundingClientRect(),
    i = n.left - t.left,
    a = t.right - n.right,
    r = N(e.rightColumnExpanded, t, n),
    o = r.hasBlackFill,
    s = r.chatCollapsed;
  return {
    top: 0,
    left: i,
    position: "absolute",
    width: "100%",
    maxWidth: "calc(100% - " + (i + a) + "px)",
    maxHeight: "calc(100vh - " + S + "px)",
    overflow: "hidden",
    zIndex: 1,
    height: "auto",
    transition: "0.5s transform",
    transformOrigin: s || o ? "center top" : "left top",
    transform: "scale(1)",
  };
}

e.mainRef
<div class="root-scrollable__wrapper tw-full-width tw-relative">

e.contentRef
<div class="tw-absolute tw-bottom-0 …t--theme-light tw-top-0" data-target="persistent-player-content">

the r will be an object returned by N(e, t, n) such as

Object { hasBlackFill: true, scaleVideo: 1.3757244215568434, videoWidth: 904.9777560763888, chatCollapsed: true }

Comment 5

[Dennis Schubert [:denschub]]

It appears to be working just fine now, so I'll close this. Please reopen if you're still seeing this.