1881263 - Controls overlay on fullscreen youtube videos disappears when mouse hovers it

Status: NEW

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Sean Feng [:sefeng211]]

Attachment: IMG_1289.mov

This is Firefox Release 122.0.1 on Windows 11.

Not easily reproducible, however I experience this issue pretty much once in every two days.

Comment 1

[Jim Mathies [:jimm]]

Something with mouse event delivery or targeting maybe? Or just a bug in youtube's js.

Comment 2

[Jim Mathies [:jimm]]

Might be webcompat as well?

Comment 3

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I cannot reproduce this with Firefox 123.0 on Win 11.

Comment 4

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

The progress bar and the toolbar containing buttons are siblings. I wonder, do you see some gaps between them when you reproduce it?

Comment 5

[Sean Feng [:sefeng211]]

I was able to see it today, there's a actually a DOM element covers the control panel.

<tp-yt-paper-toast id="toast" allow-click-through="" aria-label="toast" role="region" class="toast-button style-scope yt-notification-action-renderer style-scope yt-notification-action-renderer" style="outline: none; z-index: 2202; position: fixed; box-sizing: border-box; left: 0px; top: 434px; max-width: 328.117px; max-height: 48px;"><!--css-build:shady--><span id="label" class="style-scope tp-yt-paper-toast"></span>

  <div id="text-container" class="style-scope yt-notification-action-renderer">
    <yt-formatted-string id="text" respect-html-dir="" split-lines="" class="style-scope yt-notification-action-renderer">Experiencing interruptions?</yt-formatted-string>
    <yt-formatted-string id="sub-text" respect-html-dir="" split-lines="" class="style-scope yt-notification-action-renderer" is-empty="" hidden=""><!--css-build:shady--><!--css-build:shady--><yt-attributed-string class="style-scope yt-formatted-string"></yt-attributed-string></yt-formatted-string>
  </div>
 
    <yt-button-renderer id="action-button" class="style-scope yt-notification-action-renderer" button-renderer="" button-next=""><!--css-build:shady--><yt-button-shape><a class="yt-spec-button-shape-next yt-spec-button-shape-next--text yt-spec-button-shape-next--call-to-action-inverse yt-spec-button-shape-next--size-m" style="" aria-label="Find out why" title="" href="https://www.google.com/get/videoqualityreport/?v=NsZHXDVyJ1k" target="_blank" force-new-state="true"><div class="yt-spec-button-shape-next__button-text-content"><span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Find out why</span></div><yt-touch-feedback-shape style="border-radius: inherit;"><div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response-inverse" aria-hidden="true"><div class="yt-spec-touch-feedback-shape__stroke" style=""></div><div class="yt-spec-touch-feedback-shape__fill" style=""></div></div></yt-touch-feedback-shape></a></yt-button-shape><tp-yt-paper-tooltip fit-to-visible-bounds="" offset="8" disable-upgrade=""></tp-yt-paper-tooltip></yt-button-renderer>
  <dom-if class="style-scope yt-notification-action-renderer"><template is="dom-if"></template></dom-if>
  <dom-if class="style-scope yt-notification-action-renderer"><template is="dom-if"></template></dom-if>
 
    <yt-icon-button id="close-button" class="style-scope yt-notification-action-renderer" hidden="" role="button"><!--css-build:shady--><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="Cancel">
      <yt-icon icon="yt-icons:close" class="style-scope yt-notification-action-renderer"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; display: block; fill: currentcolor;"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: inherit; width: 100%; height: 100%;"><path d="m12.71 12 8.15 8.15-.71.71L12 12.71l-8.15 8.15-.71-.71L11.29 12 3.15 3.85l.71-.71L12 11.29l8.15-8.15.71.71L12.71 12z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon>
    </button><yt-interaction id="interaction" class="circular style-scope yt-icon-button"><!--css-build:shady--><!--css-build:shady--><div class="stroke style-scope yt-interaction"></div><div class="fill style-scope yt-interaction"></div></yt-interaction></yt-icon-button>
  <dom-if class="style-scope yt-notification-action-renderer"><template is="dom-if"></template></dom-if>
 
    <yt-icon id="close" icon="yt-icons:dismissal" class="style-scope ytd-video-quality-promo-renderer"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; display: block; fill: currentcolor;"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: inherit; width: 100%; height: 100%;"><path d="m12.71 12 8.15 8.15-.71.71L12 12.71l-8.15 8.15-.71-.71L11.29 12 3.15 3.85l.71-.71L12 11.29l8.15-8.15.71.71L12.71 12z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon>
 

</tp-yt-paper-toast>

It's fixed if I remove this DOM.

Looks like a youtube issue?

Comment 6

[Sean Feng [:sefeng211]]

Although this is Youtube, it looks like I am the only person experiencing this issue. So I'll just label it as S3.