1178106 - Orientation media queries can report incorrect value at page creation

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Alexander Farkas]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Firefox for Android

Steps to reproduce:

1. Render a page with the following markup:

```
<picture>
	<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=landscape&w=350&h=150&txttrack=0" media="(orientation: landscape)" />
	<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=portrait&w=350&h=150&txttrack=0" media="(orientation: portrait)" />
	<img />
</picture>
```
2. Load the page in portrait mode


Actual results:

Firefox for Android loads the landscape image candidate.


Expected results:

Firefox should load the portrait image.

Comment 1

[Alexander Farkas]

This the bug report discussed here: https://bugzilla.mozilla.org/show_bug.cgi?id=1135812#c58

As it seems `matchMedia` returns wrong results initially. This cause of this bug might be the same problem as the issue described here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1063707

The following addition fix this bug:
https://github.com/scottjehl/picturefill/blob/afarkas-pf3-proposal/src/plugins/gecko-picture/pf.gecko-picture.js#L50-52
(Firefox first reports incorrectly landscape mode, but then triggers a matchMedia change without triggering a resize event and returns the correct orientation.)

Comment 2

[Josh Matthews [:jdm]]

Alexander, I have a report that the page described in comment 0 loads a portrait image as expected in Firefox Nightly on Android. Can you confirm this behaviour?

Comment 3

[Alexander Farkas]

Hi Josh,

sorry for taking so long. Somehow I missed the notification for the needinfo flag.

I can confirm, that this specific issue is fixed now. The correct portrait image is now loaded/displayed.

However the underlying problem still seems to exist. If I add the following JS:


    <script>
	document.write('landscape: '+ matchMedia('(orientation: landscape)').matches);
    </script>

The Firefox Aurora prints: 

    landscape: true

Which tells me, that media queries are still resolved wrong at the beginning.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Is this Android-specific?  When I try the steps from comment 3 in a window that's taller than it's wide on Mac, I get the expected results...

Comment 5

[Alexander Farkas]

Yes, it is android-specific. I will check, whether it is was fixed by https://bugzilla.mozilla.org/show_bug.cgi?id=1180267.