1295048 - Youtube share mouse over misplacement

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Yani]

Attachment: youtube share.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20160814030203

Steps to reproduce:

Ensure you have the menus enabled
Open a Youtube page
Mouse over the share button 


Actual results:

Mouse over help is ~20 pixels too low and make selection difficult. The mouseover help flashes.


Expected results:

Mouse over placement should be above the share button.

Comment 1

[Yani]

I looked at this in Chrome and in safe mode.

In fact I checked it in both Chrome and Minefield yesterday and the issue didn't exist. I think that might have been as I used my own channel when I did the check and the extra links provided by Youtube for logged in users seem to resolve the issue.

As best I can see it appears to move the rollover down about the same amount as the menu bar is tall when active. That would make sense of why it isn't already reported if the majority aren't using the menu bar. 

It seems to be pretty consistent here. Bit odd that I've not noticed any other misplacement of rollovers.

Comment 2

[Yani]

There is a crash report here
bp-473d913f-521c-417a-814a-a00612160814

Comment 3

[Yani]

Humm... if you watch a Youtube page you see the video load then a white space is added over the video. I look like this is where the issue is generated. 

I took out Firebug and all addon that were youtube specific and that didn't change the issue.

Comment 4

[Yani]

Attachment: gap.png

Gap which is generated after video load and moves mouseovers to the wrong location.

Comment 5

[u554753]

Hi Yani,

Can you provide steps on how to access the share button from the menu bar? It works for me with the following specs: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0 
but I also want to ensure I am understanding your issue correctly.

Comment 6

[Yani]

Attachment: Gap Firefox versus Chrome

Not the share button from the menu bar only the shave button with the standard windows chrome menu bar active.

This is a bit of an odd effect as I'm only seeing it maybe +70% of the time. It's something to do with the order in which items are loaded.

Comment 7

[Yani]

I disabled every addon then turned them back on one at a time, in fact I think I've turned more addon on that previously and I can't reproduce the effect. Obviously it's not in my imagination or there would be no screen grab. I'll keep looking for the trigger today.

Comment 8

[Yani]

If I play this video

https://www.youtube.com/watch?v=z0-KZS1dDyw

then at ~2sec in the wrong additional white space appears.

I closed and restarted the browser and repeated the effect.

Comment 9

[u554753]

Cleaning up the Untriaged list. If you feel this is the wrong component, please correct as needed. Thanks.

Comment 10

[Yani]

I'm still seeing this error and it is damn annoying. It needs to be looked at and confirmed.

Comment 11

[Yani]

So annoying... it effects every control on youTube pages. Don't let it slip past without a fix. I'll screen grab a video of this if you guys need it to see the issue.

Comment 12

[Andrew Overholt [:overholt]]

Karl, I feel like you've looked at something like this (or maybe this) recently. Am I correct? (Tentatively moving to TE, too)

Comment 13

[Yani]

Building a play list in youTube. The "hint" was covering 90% of the add button.

Comment 14

[Karl Dubost💡 :karlcow]

Hmm interesting I can't reproduce either but I'm on mac with Firefox Nightly.
That said there are differences in the page behavior.


1. Yani's link 
   https://www.youtube.com/watch?v=z0-KZS1dDyw

2. Gnarls Barley
   https://www.youtube.com/watch?v=bd2B6SjMh_w
   Everything plays 

if I compare the debug info for each, there are quite similar.
But when playing the Yani's link on a clean profile after 2s there's a slight page blink and a transparent purple-ish square on top of the video surface, but I think it's a different issue.

Yani 

* Does it happen when you resize the window for different form factor.
* Does it make a difference when annotations are on or off?
* Are you logged in into YouTube?

Comment 15

[Yani]

* Does it happen when you resize the window for different form factor.
* Does it make a difference when annotations are on or off?
* Are you logged in into YouTube?

None of that makes any difference. 

It happens in the last seconds of a page refresh. 

This is on Nightly

Some connection to the CSS .appbar-hidden #masthead-positioner-height-offset

It seems to be more than just simple CSS. 

It could be some javascript code in youTube that is specific to Firefox.

Comment 16

[Karl Dubost💡 :karlcow]

Ah thanks Yani.

#masthead-positioner-height-offset {
	height: 90px;
}

.appbar-hidden #masthead-positioner-height-offset {
	height: 50px;
}

because of the cascade. the 50px takes over the 90px and this 40px seems to be close to what you are experiencing for the gap.


The part of the CSS where this is happening is:
https://s.ytimg.com/yts/cssbin/www-pageframe-vflS7UaoM.css


#masthead-positioner-height-offset {
	height:90px
}
.exp-searchbox-redesign #masthead-positioner-height-offset {
	height:96px
}
.appbar-hidden #masthead-positioner-height-offset {
	height:50px;
}
.exp-searchbox-redesign.appbar-hidden #masthead-positioner-height-offset {
	height:56px
}
.sitewide-ticker-visible #masthead-positioner-height-offset {
	height:125px
}
.sitewide-consent-visible #masthead-positioner-height-offset {
	height:146px
}
.exp-searchbox-redesign.sitewide-ticker-visible #masthead-positioner-height-offset {
	height:131px
}
.sitewide-ticker-visible.appbar-hidden #masthead-positioner-height-offset {
	height:85px
}
.sitewide-consent-visible.appbar-hidden #masthead-positioner-height-offset {
	height:106px
}
.exp-searchbox-redesign.sitewide-ticker-visible.appbar-hidden #masthead-positioner-height-offset {
	height:91px
}


The appbar-hidden is set through
https://s.ytimg.com/yts/jsbin/www-pageframe-vflo9ZRlQ/www-pageframe.js

    function Ko() {
        var a = A(document.body, "appbar-hidden"),
            b = Le(Do).B,
            c = Ne(Do).height;
        hp = a ? b + c : b + c - 40
    }

The code is not specific to Firefox, it goes through on Safari. 
I tried with Firefox Nightly 52.0a1 (2016-10-23) (64-bit) on MacOSX **clean profile** no addons, no blocking with non e10s window, with private window (tracking protection on).

And I'm still unable to reproduce. :/ 



There is probably something I'm missing. Let's go back to 

"Ensure you have the menus enabled"

What do you mean by this? Which steps do you take to do that?

Comment 17

[Yani]

It happens with the menus on and off. So I don't think that is the issue. (standard windows menus)

If I correct the CSS, the position of the roll overs is still out.

The bit of space is just that. The issue is the misplacement of the rollovers which in some case near covers the entire button. 

I'd say it was an error via JavaScript as it occurs late in the page loading.

Minefield
"Use of attributes’ nodeValue attribute is deprecated. Use value instead."

Chrome
"VM216:1 'webkitIDBFactory' is deprecated. Please use 'IDBFactory' instead."


If the issue is the youtube code, and it may well me, then let's confirm that and report to them.

Comment 18

[Mike Taylor [:miketaylr]]

This doesn't reproduce for me in Nightly or Release on my Windows 10 machine.

Yani, can you test again?

Comment 19

[Yani]

When I looked yesterday the issue mentioned was gone and been replaced with a new issue where the top of the videos is trimmed off. 

I only noticed as the video I was watching had text at the top. 

Say this video... https://youtu.be/Qfcejpl0it4

Check the top of head to top of video then go full screen to see the amount that should not have been  trimmed

Comment 20

[Yani]

Attachment: Trim issue in youTube

Comment 21

[Mike Taylor [:miketaylr]]

> When I looked yesterday the issue mentioned was gone and been replaced with a new issue where the top of the videos is trimmed off. 

OK, can you file a new issue for that? Let's go ahead and resolve this one.