This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 26480 - Author style max-width/height can interfere with style
Summary: Author style max-width/height can interfere with style
Status: RESOLVED FIXED
Alias: None
Product: WebAppsWG
Classification: Unclassified
Component: Fullscreen (show other bugs)
Version: unspecified
Hardware: PC Linux
: P2 normal
Target Milestone: ---
Assignee: Anne
QA Contact: public-webapps-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-07-31 13:04 UTC by Philip Jägenstedt
Modified: 2014-08-01 07:24 UTC (History)
6 users (show)

See Also:

Attachments

Description Philip Jägenstedt 2014-07-31 13:04:35 UTC 
http://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults

<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
body {
  background: pink;
  margin: 0;
}
iframe {
  border: 0;
  height: 270px;
  max-height: 50%;
  width: 100%;
}
</style>
<iframe src="//www.youtube.com/embed/pg5iRruqcps"></iframe>

This is a minimized version of http://m.vk.com/video10345392_166569492

The author style sheet says max-height: 50% and since the user agent style sheet doesn't say differently, in fullscreen the iframe fails to fill the viewport.

Unless there's some case where this makes sense, min-width, min-height, max-width and max-height should all be 100% in the UA style sheet.

It fixes the problem in the wild, at least.
Comment 1 Anne 2014-07-31 13:09:41 UTC 
roc, WDYT?
Comment 2 Boris Zbarsky 2014-07-31 13:33:03 UTC 
The Gecko styles for *|*:not(:root):-moz-full-screen are:

  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483647 !important;
  background: black;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;

which I suspects answers your question about what roc thinks, but also note the box-sizing and z-index bits....
Comment 3 Robert O'Callahan (Mozilla) 2014-07-31 23:41:21 UTC 
z-index is only an artifact of the way we implement fullscreen. If we implemented it the way the spec says, with a magic extra always-on-top layer, we wouldn't need it. So I don't think that needs to be required in the UA sheet.

box-sizing:border-box does need to be in the UA sheet though.
Comment 4 Anne 2014-08-01 04:26:20 UTC 
The specification has box-sizing. We don't have anything as !important though. Wouldn't we want to let developers override these things?
Comment 5 Anne 2014-08-01 04:26:58 UTC 
Also, does the CSS specification even allow !important for user agent style sheets?
Comment 6 Philip Jägenstedt 2014-08-01 06:55:06 UTC 
Blink also has !important sprinkled all over its fullscreen.css UA style sheet, FWIW.
Comment 7 Anne 2014-08-01 07:10:23 UTC 
It seems per http://dev.w3.org/csswg/css-cascade/ user agent style sheets can do this. Okay.