page showing html5 youtube video focus the video and scroll it into view

RESOLVED FIXED

Status

()

Core
Event Handling
RESOLVED FIXED
6 years ago
4 years ago

People

(Reporter: Mardak, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(blocking2.0 -)

Details

(URL)

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

6 years ago
Created attachment 514305 [details]
iframe to youtube with lots of margin-top

When Google Reader loads a new article, sometimes the page jumps down to some random-ish location. Turns out it's somehow caused by embedding a youtube video in an iframe (using the standard youtube embed code).

The bottom of the page scrolls to the very top of the video, so you see the article just before the video in Reader.

This seems to only happen when the fallback to <video> is used instead of flash, which seems to be the default behavior in Google Reader.

I've regressed it back to 0804 - 0805:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=c761f8e85b8c&tochange= bbefb7bcb41e

That might point to bug 581848? But that's probably just covering the real issue.?

The attached is just an iframe with a lot of scroll:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/COU5T-Wafa4" frameborder="0" allowfullscreen style="margin-top: 10000px;"></iframe>

To get it to scroll, Flash needs to be *disabled* in this case, but leaving flash enabled or disabled will cause Reader to scroll
flash is *disabled* and
(Reporter)

Comment 1

6 years ago
Oh, this also happens when you have the html5 youtube trial enabled:
http://www.youtube.com/html5

Just load the testcase and it'll jump to show a blank page just above the video.
Summary: Google Reader jumps around randomly when falling back to html5 youtube video → Google Reader jumps around randomly when showing html5 youtube video
(Reporter)

Comment 2

6 years ago
Fyi, loading the testcase in Chrome 10.0.648.82 beta doesn't jump to the video when disabling all plugins (or just disabling flash).

Flash version for reference even though it needs to be disabled for this to happen: 10.2.152.26

Happens on trunk and since beta 3 or so.
(Reporter)

Comment 3

6 years ago
This happens on windows as well. I'll see if I can find a better range on my windows machine. Probably not a plugin issue as it happens when the plugin is disabled. ?
Component: Plug-ins → Video/Audio
OS: Mac OS X → All
QA Contact: plugins → video.audio
Hardware: x86 → All
(Reporter)

Comment 4

6 years ago
Not quite sure where to file this or if this is by design, but basically the youtube iframe is calling focus() on a div with tabindex and that causes the parent page to scroll.
Component: Video/Audio → Event Handling
QA Contact: video.audio → events
(Reporter)

Comment 5

6 years ago
Created attachment 514374 [details]
minified test case

Basically does:

<iframe src="focus a div" style="margin-top: 10000px;"></iframe>

And "focus a div":

<div id="d" tabindex="0"></div>
<script>addEventListener("DOMContentLoaded", function() {
  document.getElementById("d").focus();
}, false)</script>

This doesn't scroll in Safari 5.0.3 (6533.19.4) or Chrome 10.0.648.82 beta or Opera 11.01.
Attachment #514305 - Attachment is obsolete: true
(Reporter)

Comment 6

6 years ago
Fyi, if you change "div" to "input", Chrome and Safari scroll while Opera doesn't scroll (but does move focus, so if you type, it'll jump to the input box).
(Reporter)

Comment 7

6 years ago
I spotted bug 606011 when looking for dupes or related bugs, and decided to test that in other browsers as well.

Generally it seems like other browsers will *not* scroll to .focus()ed elements that have no content, e.g., empty div or anchor with no content. I believe the YouTube div#video-player node has content, so I'm not quite sure what their heuristics are to determine when to scroll or not.
Is this a regression?

I suspect Ehsan, whether it is or not :-)
Assignee: nobody → ehsan
(Reporter)

Comment 9

6 years ago
Not a regression. I just checked 3.6, 3.5, 3, 2, 1.5. Only 1(.0.8) didn't scroll and that was because "Error: document.getElementById("d").focus is not a function"

Probably not a blocker depending on how aggressively Google will switch to html5 video by default. But hopefully by then, they'll have removed/worked around this <div tabindex="0">.focus() issue. [The other STR is probably less likely with the user disabling Flash and YouTube falling back to <video>.]

Otherwise any page using the default embed code provided by YouTube will result in the page jumping around in Firefox only. (This is especially bad on blogs that embed a video in each post as Firefox will seem like it's spazzing out. o.O)

Do we have a way to file bugs against YouTube or at least poke people? (Any suggestions for a workaround?)
We can send email to mozilla-google-discuss.

However, for the sake of interop we should probably a) make sure the HTML spec says whether to scroll or not and b) implement whatever the spec says.
I'd be particularly interested to hear from Neil whether he thinks we should be focusing the div and scrolling it into view in this case.
Not going to block, but yes, please make sure it ends up on mozilla-google-discuss, follow up on spec, and renominate if it becomes a bigger issue in the future!
blocking2.0: ? → -
The spec doesn't seem to say anything about scrolling elements into view when they're focused.

My inclination would be to always scroll elements into view when they're focused, because that's the simplest behavior, but I still want to hear to Neil thinks.
Added Ed to the list.
Unassigning now that my name is cleared from this!  ;-)
Assignee: ehsan → nobody
(Reporter)

Comment 16

6 years ago
You can add http://googleblog.blogspot.com/ 's feed to Google Reader or just visit that page to see stuff jump around.

Comment 17

6 years ago
If bug 637177 is a duplicate of this, it's considerably more widespread than Google Reader. I see it on http://blogs.msdn.com/b/ie/ and http://tantek.com/ and various other sites.

Comment 18

6 years ago
I cleared my YouTube cookies (one of them presumably the HTML5 video opt-in) and now I'm no longer getting the scrolling behavior at the IE blog or Tantek's site. I'll dupe my bug here.

Updated

6 years ago
Duplicate of this bug: 637177

Updated

6 years ago
Summary: Google Reader jumps around randomly when showing html5 youtube video → page showing html5 youtube video focus the video and scroll it into view
IE9 scrolls to empty content when focused.

Safari/Chrome appear to be using a more complex heuristic that depends on how visible the element is. The following, for example, does not scroll, despite that the text overflows and is visible to the user:

<div id="d" tabindex="0" style="width:0px; height: 0px;">Cats</div>

Presumably, some form of 'is zero-rectangle' check is performed before scrolling. Note also that element.scrollIntoView() does scroll on collapsed elements even when focus() does not.

It doesn't seem to me that there should be a reason not to scroll to empty elements, especially as this one has a explicit tabindex set.
(Reporter)

Comment 21

6 years ago
YouTube will be removing the call to focus(). It breaks other things as well in other browsers like keyboard shortcuts in Reader.
(Reporter)

Comment 22

6 years ago
Seems to be fixed today.
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.