Stretch behavior for Video, Images, Canvas and other replaced elements

[saschanaz]

Element with a source (incorrectly sized): http://jsfiddle.net/3ao61e5o/4/
Element with no source (correctly sized): http://jsfiddle.net/3ao61e5o/1/

Sizing only works on Chrome, otherwise it becomes broken.

[FremyCompany]

Interesting. On my pc at least, the sizing also works in IE. So it seems only Firefox is broken (and maybe Safari, I don't have a build at hand to try out).

As far as I understand the issue, the layout is broken in Firefox because the video element has an intrinsic size that is the one of the video file, and not the default one for html elements.

As a result, the element is smaller than the viewport (=grid cell) in Chrome and IE, and gets scaled up. However, it's bigger than the viewport (=grid cell) in Firefox and the CSS Alignment specification tells us not to shrink to fit an element. As a result, the video element overflows even though it could tecnically take less room than it does.

A fix for this problem would be to identify elements having an intrinsic width that's only a preference (images, videos, maybe iframes; if their width/height attributes are left untouched) and accept to shrink-to-fit them anyway. It is probably not entirely against the spec to work this way.

I'll send a mail to the css working group with your issue, and we'll see whether the spec needs to be updated to accomodate this use case or if I can change my code directly.

In the mean time, I would recommend you set the size of your video to 0.

video { grid-area: 1 / 1; width: 0; height: 0; }

The video will grow-to-fit correctly in that case, giving you the expected result.

[FremyCompany]

http://lists.w3.org/Archives/Public/www-style/2015May/0166.html

[saschanaz]

Thank you for your explanation and the workaround! :D

Note: Microsoft Edge (Project Spartan) also have this problem, while I don't know whether it's just a temporary bug or not. -ms-grid just works as expected.

[FremyCompany]

The word has it that no one understands how the expected behavior really is defined in the spec, but everyone agrees that replaced elements should shrink-to-fit. I'll fix this issue.

[saschanaz]

Thanks! 👍

[FremyCompany]

This a very rough fix, as it now assumes replaced elements can stretch all the time. I think this is the expected use as people won't want to have their items overflow grid cells like you had before, but this needs some more work. It's hard to find out if an element has "width: auto" though (as in: not efficient). So, if no one complains, I'll leave it as-is and possibly revisit later.