[cssom-view] should screen.width and screen.height reflect orientation?

foolip commented 4 years ago

The Screen Interface define screen.width and screen.height in terms of the Web-exposed screen area.

It looks like this has not changed in a long time, since https://github.com/w3c/csswg-drafts/commit/dc36ecd7a46b173f958dafa736a84eb9753afb7b.

A web developer reported having to work around something around screen width/height in combination with orientation, and it looks like implementations disagree here. My test was simply:

<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<pre></pre>
<script>
setInterval(() => {
  document.querySelector('pre').textContent = `screen.width = ${screen.width}
screen.height = ${screen.height}
window.orientation = ${window.orientation}`;
}, 100);
</script>

Testing this on Chrome for Android and Safari on iOS, I observe that:

On Chrome, screen.width and screen.height flip when rotating the phone
On Safari, screen.width and screen.height stay the same
Chrome and Safari agree on what window.orientation should be, happily

Is the spec unambiguous on this point? I ask because I can't find any open WebKit bug about this, so I'm doubting the right behavior. (In my reading of the spec, maybe both are allowed?)

foolip commented 4 years ago

@smfr I see you're the editor of CSSOM View now (yay!), is this issue something you've heard about before? Who should we pull into this discussion to make some progress?

smfr commented 4 years ago

I'm not aware of previous discussion on this issue, and it seems like spec clarification would be worthwhile.

fantasai commented 4 years ago

In general, CSS is not time- or order- dependent, and inputs into it are supposed to reflect the current state not some previous state. So definitely, screen.width/height should be reporting whatever is the current width/height, same as media queries.

foolip commented 4 years ago

I went ahead and tested this on Firefox for Android a well. The behavior is mostly like Chrome, in that width and height change when rotating. However, the numbers seem to exclude some part of the UI, as the dimensions go from 396×820 to 836×380 on the device I used, which was a Pixel 4 on BrowserStack. So it seems like 16 pixels of vertical space are deducted, perhaps for Android's top bar, I'm not sure.

@annevk do you know who the right person at Mozilla to have an opinion on this would be?

@smfr since it appears that Chrome and Firefox agree on that the dimensions should swap when rotating, do you think it would be reasonable to spec that? Or is there an upside to the Safari behavior that's not obvious at first glance?

I'm not sure if there's reason to suspect that the change in either direction is riskier from a compat perspective, if anyone does please speak up :)

annevk commented 4 years ago

@heycam and @emilio can probably help. @fantasai's take seems good to me. Note also #399 and the two options allowed by the specification today. If you expose the viewport here you definitely want to take rotation into account.

emilio commented 4 years ago

@snorp seems familiar with all the screen code on android who may be able to explain the behavior here.

Other than that I agree with @fantasai about the behavior.

snorp commented 4 years ago

It looks like we're using Display.getRealSize() for this, which seems like it should be doing the right thing. I've filed a bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1657380

foolip commented 4 years ago

Great, it sounds like there's support for making these attributes reflect the rotation. What are the necessary steps for making it so, does there need to be a WG resolution, i.e., should this be added to a F2F agenda?

takahirox commented 2 years ago

Hi, any updates on this issue?

I noticed the different behaviors between Android Chrome and iOS Safari. I think the behavior should be consistent across platforms.

I'm thinking of adding a WPT test to ensure the consistent behavior across platforms.

https://chromium-review.googlesource.com/c/chromium/src/+/3711440

I hope we can both clarify the specification and add the WPT test.

/cc @foolip @smfr

w3c / csswg-drafts

[cssom-view] should screen.width and screen.height reflect orientation? #5204