1948841 - Video frame will not scale to window size since version 134

Status: NEW

(Core :: Layout: Flexbox, defect)

Description

[bugzilla.y2483]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Steps to reproduce:

I am having an issue where the video frame on kodekloud.com (a learning platform) does not scale properly in a Firefox browser and displays it in full frame instead of sizing it up to viewport. It's an embedded vimeo video.

The problem is reproducable in a private window without any add-ons and on multiple operating systems. It is however not present on any other browser (either Chromium based or Safari), so this a Firefox specific issue.

Expected results:

I have traced the issue to be present since the release of Firefox 134. I am presenting screenshots from both version 133 (where the behaviour was as expected) and 135 (the current one, where it is broken).

Can someone please let me know what might have changed between the versions that might have caused this rendering issue and whether there is somehow a way to mitigate it, because my options at the moment are switch to another browser or stay on v133 and accept all the security risks that are not updated (I am leaning towards to first one).

Screen size: 32"
Resolution: 2560x1440
OS: replicated on both macOS (Apple Silicon) and Linux Mint (Debian Edition)
Firefox version: 135.0 on both systems

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[bugzilla.y2483]

Attachment: Firefox v133.png

Firefox v133 displays it properly

Comment 3

[bugzilla.y2483]

Attachment: Firefox v135.png

Behaviour in Firefox135 where the video is not scaled to viewport

Comment 4

[Paul Adenot (:padenot)]

Thanks for reporting! To help diagnose this issue better, please can you:

• Type "about:support" in Firefox and copy-paste its contents here
• Does this reproduce in a clean profile or Troubleshoot Mode?

Is this a website that can be accessed by one of our developers?

Capture a log when the issue occurs:

• In Firefox, ideally freshly started with no other tabs, go to about:logging in a new tab
• Select the Media preset
• Enable "stack traces for log messages"
• Click on "Set Log Modules"
• Click Start Logging
• Reproduce the bug
• Back on about:logging, click Stop Logging
• In the new tab that appears with the Firefox Profiler web application, in the top right click the button to upload the profile
• Make sure hidden threads are included and upload, then share the link here or send privately to a Mozilla developer
• See https://paul.cx/public/about-logging-presentation.webm for a video walk-through

Comment 5

[bugzilla.y2483]

Thank you Paul. I will upload the requested logs during the weekend.

Comment 6

[bugzilla.y2483]

Attachment: OK

> - Type "about:support" in Firefox and copy-paste its contents here

> 
> Is this a website that can be accessed by one of our developers?
> 
> Capture a log when the issue occurs:
> 
> -   In Firefox, ideally freshly started with no other tabs, go to `about:logging` in a new tab
> -  Select the Media preset
> -  Enable "stack traces for log messages"
> -  Click on "Set Log Modules"
> -  Click Start Logging
> -  Reproduce the bug
> -  Back on about:logging, click Stop Logging
> -  In the new tab that appears with the Firefox Profiler web application, in the top right click the button to upload the profile
> -  Make sure hidden threads are included and upload, then share the link here or send privately to a Mozilla developer
> -  See https://paul.cx/public/about-logging-presentation.webm for a video walk-through

Comment 7

[bugzilla.y2483]

• Does this reproduce in a clean profile or Troubleshoot Mode?

The about:support file attached in the comment above is from a clean profile.

Is this a website that can be accessed by one of our developers?

The website does offer some free courses where the behavior can be observed. An account needs to be created.

Capture a log when the issue occurs:

• In the new tab that appears with the Firefox Profiler web application, in the top right click the button to upload the profile
• Make sure hidden threads are included and upload, then share the link here or send privately to a Mozilla developer

https://share.firefox.dev/4kqRXtD

Thanks Paul. Please let me know if there is anything I can do.

Comment 8

[Paul Adenot (:padenot)]

Thank you very much, very useful, we don't need more information from you and I believe we can proceed.

We'll get this triaged and we can mozregression it after creating a login. Marking this as webcompat since Fx behaves differently than other implems.

Comment 9

[Jim Mathies [:jimm]]

No luck finding freebie lessons containing video to test so I'm not able to regression test this.

Comment 10

[Jim Mathies [:jimm]]

Reporter, could you help us out by trying to find a regression range? We have a tool that helps find these, you can try it out here https://mozilla.github.io/mozregression/. Please choose mozilla-central for the target builds, and start about six months ago.

Comment 11

[bugzilla.y2483]

The mozregression tool does not work on Ubuntu 24.04, and I was not able to install it.

As I have said above, the site has free courses which can be used to display the bug.
One needs to create an account first. After that, a click on "Enroll in this course" leads to the part that is needed to test the behaviour -> play a video.

I have also found the regression range by testing older versions, as I mentioned above. The issue comes up with v134, that's why I have set up a v133 on macOS until you find a solution.

Comment 12

[Alastor Wu [:alwu]]

This wrong scale seems more like a whole layout for the video player is set to a wrong size, not the output video size. From here, we can see the video size was originally 426x232 (from metadata, incorrect), then changed to 1980x1080 later. The media element also did dispatch resize event as well. So not sure what affects the player's size.

---

Emilio, is this something you could help with? If not, do you know who would be the best candidate to ask? Thanks!

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Attachment: reduced test-case

Agreed this is layout.

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Mozregression points to bug 1926015, Ting-Yu, can you take a look? There's quite a few things going on in here:

• If I remove overflow: hidden, chrome matches us.
• If I remove the max-height and so on, then we behave as chrome...

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1926015

Comment 16

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Re comment 14:

Sure. I can take a look. I'll keep my NI as a reminder.

Thank you for posting a reduced testcase. After loading the test and shrinking the browser window, I observed that the innermost flex item doesn't respect aspect-ratio: 16/9 CSS property. I need to investigate further.

Comment 17

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1926015

Comment 18

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Testcase #2: further reduced from comment 13

In this testcase, Firefox and Google Chrome behave differently. In Firefox, the box with blue border overflows the container in the inline axis, whereas Chrome shows no such overflow.

Comment 19

[Dianna Smith [:diannaS]]

:TYLin this will not make it for 138, any chance this will make it for 139?

Comment 20

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Re comment 19:
Sorry, I don't think I'll have something ready for 139.