www.sonyliv.com - design is broken

[ghajini]

URL: https://www.sonyliv.com/shows/rocket-boys-1700000852/war-and-peace-1000158649?watch=true

Browser / Version: Firefox Mobile 99.0 Operating System: Android 11 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce: when clicked fullscreen,it doesn't enter into fullscreenmode

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20220214092817
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thank for the report. Unfortunately, I can't access the site from my location nor with VPN.

@ghajini can you check the console logs and add a screenshot here with it? @ksy36 do you have any luck with this?

[qa_07/2022]

[ghajini]

Console messages are available https://webcompat.com/console_logs/2022/2/e3bdceb8-1b7a-4c38-a0fd-2486bb091c64

[ghajini]

So does this look like a https://bugzilla.mozilla.org/show_bug.cgi?id=1411227 ?

[softvision-oana-arbuzov]

Ping @ksy36

[ksy36]

This seems to be working now in Nightly 99.0a1 (2022-03-08), I'm able to watch it in fullscreen. @ghajini could you please check if the problem is still reproducible for you?

[ghajini]

still design is broken ,when clicked fullscreen, doesn'tgo into fullscreen, looks like this the worst

In google android this looks correct

[ksy36]

@softvision-oana-arbuzov could you try to reproduce this with a VPN to Canada please? Wonder if this issue is device-specific.

[softvision-oana-arbuzov]

I managed to sign in on one of my devices with VPN active pointing to Canada, but for me the videos is fully broken, both on Firefox and Chrome.

Landscape mode:

Tested with: Browser / Version: Firefox Nightly 100.0a1 (🦎 100.0a1-20220317092857), Firefox Beta 99.0.0-beta.3 (🦎 99.0-20220315185755) Operating System:Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

@ghajini on Chrome does the video play in fullscreen?

[inv_11/2022]

[ghajini]

@softvision-oana-arbuzov

video does play on my side using chrome and firefox....its only not going into fullscreen mode when using firefox android

Screenshot with chrome=

Screenshot with firefox android=

also may be you need indian ip to access

[ghajini]

i checked with other device, there also same issue; ruling out device specific issue

[ksy36]

Not sure if the site changed anything, but I have tried this again in Nightly 106 and the fullscreen mode worked on the first load, but after page refresh it gets stuck and doesn't go to fullscreen and just playing in the non-fullscreen mode.

There is this error displayed in the console:

lock Orientation DOMException: Operation is not supported

Looks like they're using ScreenOrientation.lock(), which is a work in progress https://bugzilla.mozilla.org/show_bug.cgi?id=1744125 in GeckoView:

                case 17:
                  return o = null !== (t = screen) && void 0 !== t && null !== (a = t.orientation) && void 0 !== a && null !== (n = a.type) && void 0 !== n && n.startsWith('portrait') ? 'landscape' : 'portrait',
                  s = i || o,
                  e.prev = 19,
                  e.next = 22,
                  screen.orientation.lock(s);

Once I enable dom.screenorientation.allow-lock in about:config in Nightly, the full screen starts working.

The work to enable it by default (in Nightly first) is tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1767449.

@ghajini wonder if you're able to check if setting dom.screenorientation.allow-lock pref in about:config to true in Firefox Nightly makes the full screen work for you?

[ghajini]

Not sure if the site changed anything, but I have tried this again in Nightly 106 and the fullscreen mode worked on the first load, but after page refresh it gets stuck and doesn't go to fullscreen and just playing in the non-fullscreen mode.

i agree with this ,when refreshed ,clicked fullscrren it doesn't go into fullscreen

@ghajini wonder if you're able to check if setting dom.screenorientation.allow-lock pref in about:config to true in Firefox Nightly makes the full screen work for you?

this doesn't make any difference

[softvision-raul-bucata]

@ksy36 any updates on the issue?

[inv_36/2022]

[ksy36]

Thanks for checking @ghajini. So I've tried this again with dom.screenorientation.allow-lock set to true and it indeed it doesn't set it to fullscreen, as you mentioned. It does set it to fullscreen though, if I set a breakpoint on the screen.orientation.lock(s); function from here:

                case 17:
                  return o = null !== (t = screen) && void 0 !== t && null !== (a = t.orientation) && void 0 !== a && null !== (n = a.type) && void 0 !== n && n.startsWith('portrait') ? 'landscape' : 'portrait',
                  s = i || o,
                  e.prev = 19,
                  e.next = 22,
                  screen.orientation.lock(s);

When I was testing it, I had the breakpoint set, and looked like that it worked. But if I don't add it, the script actually hitting another error:

 lock Orientation DOMException: The operation is insecure.

Which is the same as https://bugzilla.mozilla.org/show_bug.cgi?id=1744288#c7.

So when the site requests for fullscreen with element.requestFullscreen();, Gecko waits for completion, and if window.screen.orientation.lock("..."); is called before it is completed, the security warning appears due to the screen not being fullscreen. So when a breakpoint is added, it actually allows the fullscreen request to complete by adding a bit of "timeout", which explains why it worked for me.

Looks like Makoto is working on aligning the behavior with Blink in the bug I linked, so we can close this is a duplicate. Note that dom.screenorientation.allow-lock is not enabled yet, it is being tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1767449