Closed Bug 1174406 Opened 9 years ago Closed 9 years ago

https://gaming.youtube.com/ is rendering improperly

Categories

(Web Compatibility :: Site Reports, defect)

Product:
Web Compatibility
Component:
Site Reports
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: caspy77, Unassigned)

References

(
URL
)

Details

Attachments

(2 files)

youtube gaming not centered
22.77 KB, image/png
Details
1174406.htm
833 bytes, text/html
Details 
Go to https://gaming.youtube.com/ in Firefox, IE and Chrome.
Firefox is not centering the content properly. It's off to the right, off the screen.

See attachment.

This was originally reported here: http://www.reddit.com/r/firefox/comments/39op93/new_gamingyoutubecom_teaser_page/
It has something to do with these flexbox-related centering styles:
#page, #content-container, #content {
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
Same styling is applied in Chrome. Firefox renders it very differently. There's a pretty minimal demo coming up, Daniel - could you investigate?
Flags: needinfo?(dholbert)
Attached file 1174406.htm — 
Attaching demo
So, there are two issues here:
Q1: Why is the iframe offset to the right?

A1: Basically: we need to fix bug 874718. The iframe is absolutely-positioned inside of a flex container. Our abspos-handling in flex containers matches an older version of the spec, per bug 874718. This site is using "align-items:center" to center the iframe, and (per the older spec-text that we match) we end up centering *the zero-sized placeholder which determines the iframe's static position*, and then the iframe's upper-left corner goes at that position.  So, its upper-left corner is centered, and it juts off to the right.


Q2: Why is the iframe all black?

A2: The iframe src is:
data:text/html,<!DOCTYPE html><html><body style='background:#fff;color:#000'><p>This IFRAME should have a white background and fill the screen horizontally, right?</p>

We (correctly) interpret that as this URL...
data:text/html,<!DOCTYPE html><html><body style='background:

...with this (bogus) fragment identifier:
#fff;color:#000'><p>This IFRAME should have a white background and fill the screen horizontally, right?</p>

The problem is that there's a not-url-encoded "#" character in their URL, which ends the URL and begins the fragment identifier.
Blocks: 874718
Flags: needinfo?(dholbert)
See https://bugs.webkit.org/show_bug.cgi?id=68089 for the webkit bug that basically covers Chrome's handling of the iframe src with a "#" character. (filed before WebKit/Blink split)
(Does YouTube actually trip the '#'-in-data-URI issue? I don't see them using an iframe with a data URI. I think that might've just been a bug in your simplified testcase. :))
So I think the one request we have for them (addressing Q1 from comment 4) is: for the time being, don't rely too much on the static (default) position of an absolutely-positioned child of a flex container, since the spec language has changed on that (and we need to catch up there and implement that change).

They can adjust to accommodate both our older behavior and the spec's newer behavior by either:
 (1) styling their iframe with "left:0" (overriding its static position to explicitly put it where they want it)
  ...or:
 (2) promoting their iframe to have its parent be the <body> instead of <div id="content"> (so that its parent is a block, not a flex container)

I tested (1) locally and verified that it fixes the bug in Firefox (and it doesn't affect Chrome's rendering, including at small window-widths).  I haven't tested (2), but I'm pretty confident that it'd work as well.
@ Harald - would you mind taking a look at the comments above and seeing if we need to raise this issue to the attn of our partners @ YouTube?
Assignee: nobody → administration
Blocks: b2g-youtube
Flags: needinfo?(hkirschner)
Looks fixed in Nightly (42.0a1 (2015-07-08)) on OSX.
Status: NEW → RESOLVED
Closed: 9 years ago
Flags: needinfo?(hkirschner)
Resolution: --- → FIXED
Yup -- looks like they took suggestion (1) from comment 7. The iframe now has "left: 0", from this style rule (in a giant one-line <style> node):
  .logo-iframe {
	background-color: #000;
	border: 0;
	bottom: 0;
	height: calc(100% - 48px);
	left: 0;
	position: absolute;
	top: 48px;
	width: 100%;
  }
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: