Bug 255197 – REGRESSION(257456@main): Scrollbar shows up on sites that initiate fullscreen from an iframe

• Component: Media
• Status: RESOLVED FIXED

[Ahmad Saleem]

Hi Team,

While going through random website, I came across another bug, which is reproducible on WebKit ToT as well (using > run-safari --release):

1) https://kissanime.com.ru/Anime/Dr-STONE-NEW-WORLD/Episode-001?id=183709&s=yuserver

2) Pick any server

3) Ensure in System Settings, you have 'always' on scrollbar

4) Play video and fullscreen, you can see scrollbar while it is fullscreen

_____

it does not happen on Chrome Canary 114 and Firefox Nightly 113.

Another possible bug is squashed video inside container but it is not happening in Firefox Nightly 113 but happening in Chrome Canary 114 and Safari 16.4.

_____

Just wanted to raise both bug.

Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/108096981>

[Ahmad Saleem]

Still reproducible on WebKit ToT.

[Ahmad Saleem]

It is still reproducible and also many people noticed it on Reddit as well. If we follow ‘reddit.com/r/Safari', I noticed few people complaining about it as well.

[Tim Nguyen (:ntim)]

The fix for this is pretty straightforward, we need to make :-webkit-fullscreen-document apply on ancestor documents as well.

Otherwise this rule that hides scrollbars won't apply: https://searchfox.org/wubkat/rev/2d36f436ba4efb45b5e3f3826637e671c9b13eaa/Source/WebCore/css/fullscreen.css#46-48

[Ahmad Saleem]

(In reply to Tim Nguyen (:ntim) from comment #4)
> The fix for this is pretty straightforward, we need to make
> :-webkit-fullscreen-document apply on ancestor documents as well.
> 
> Otherwise this rule that hides scrollbars won't apply:
> https://searchfox.org/wubkat/rev/2d36f436ba4efb45b5e3f3826637e671c9b13eaa/
> Source/WebCore/css/fullscreen.css#46-48

Looking at Chromium Source, they had similar issue:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/css/fullscreen.css;l=38?q=fullscreen.css

/* This prevents video from overflowing the viewport in
   virtual/android/fullscreen/video-scrolled-iframe.html (crbug.com/441890) and
   removes scrollbars caused by html { overflow: scroll } (crbug.com/543946).
   TODO(foolip): This is done differently in Gecko, find a fix not involving the
   ancestor selector in https://github.com/whatwg/fullscreen/issues/19. */
:root:-webkit-full-screen-ancestor {
  overflow: hidden !important;
}

Our

:root:-webkit-full-screen-document:not(:fullscreen) {
    overflow: hidden !important;
}

___

So we have to remove ':not(:fullscreen)' part?

[Tim Nguyen (:ntim)]

Pull request: https://github.com/WebKit/WebKit/pull/16112

[Tim Nguyen (:ntim)]

I posted a fix that covers the scrollbars. I couldn't reproduce the squashed video.

[Ahmad Saleem]

Created attachment 467126 [details]
Squashed Video (on specific width of window)

@Tim - if we squash the width of Safari window, it happens and it also happens on Chrome Canary 117 as well. Only Firefox Nightly 117 works perfectly fine on this page irrespective of window width.

[Ahmad Saleem]

*** Bug 258069 has been marked as a duplicate of this bug. ***

[EWS]

Committed 266340@main (0d8538115ee0): <https://commits.webkit.org/266340@main>

Reviewed commits have been landed. Closing PR #16112 and removing active labels.