developers.google.com - design is broken

[mkaply]

URL: https://developers.google.com/web/progressive-web-apps/

Browser / Version: Firefox 56.0
Operating System: Mac OS X 10.12
Tested Another Browser: Yes

Problem type: Design is broken
Description: Video on the right side is very small vertically. Works on Chrome
Steps to Reproduce:

From webcompat.com with ❤️

[adamopenweb]

Thanks @mkaply I can reproduce this in Firefox 56 for OSX.

<div class="devsite-landing-row-item-youtube">
  <iframe data-autohide="1" data-showinfo="0" allowfullscreen="" class="devsite-embedded-youtube-video" id="ytplayer0" data-enablejsapi="1" src="//www.youtube.com/embed/m-sCdS0sQO8?autohide=1&amp;showinfo=0&amp;enablejsapi=1" origin="https://developers.google.com" frameborder="0"></iframe>
</div>

Looks like the padding bottom is cutting off the viewing area of the video.

.devsite-landing-row-50 .devsite-landing-row-item-youtube {
    padding-bottom: calc((100% - 40px)/2*.5625);
}

Firefox (left) and Chrome (right):

[wisniewskit]

This is another instance of that unfortunate intentional flexbox incompatibility (see bug 958714) where percentage paddings/margins are considered to not be interoperable by spec:

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

So we're stuck unless Google wants to fix their page to use a technique that's cross browser, or Firefox decides to adopt Chrome's behavior. I'll set this to needscontact in case Google can fix their page more quickly.

[karlcow]

Just adding this line will fix it.

.devsite-landing-row-50 .devsite-landing-row-item-code, .devsite-landing-row-50 .devsite-landing-row-item-image, .devsite-landing-row-50 .devsite-landing-row-item-video, .devsite-landing-row-50 .devsite-landing-row-item-youtube {
	width: calc((100% - 40px)/2);
	height: 100%;
}

[karlcow]

sent an email today to Google.

[miketaylr]

This is fixed now.