Firefox for Android does not load portrait-version of image

[cmeeren]

Take a look at this page. In portrait orientation, the slider should be square, with square images. Otherwise it's horizontal. This works when resizing desktop browsers, as well as on stock Android browser. However, in Firefox for Android, the images are horizontal (the slider itself is square, so the CSS media query is correctly interpreted.)

Is this a known bug? Can it be worked around somehow, to make it actually work?

[aFarkas]

Does this help:
#512 (comment)

[cmeeren]

Unfortunately no. I copied the code verbatim and put it under $(document).ready(function() {...}, but seems to have no effect.

[cmeeren]

Note that the most critical point here is not about reacting to orientation changes, but FF for Android not loading the square (portrait media query) image at all.

[cmeeren]

No wait, it actually works. It runs on orientation changes. I would like to have it do an initial run though, to show the portrait version without having to rotate the device to landscape and back. How is this best done? Use JQuery to trigger the orientation change event after the code snippet you linked to?

[aFarkas]

No triggering with jQuery won't work. jQuery has decided to not follow standards.

Could you please re-check your problem with Firefox for Aurora for Android. In case this bug still happens, please report this (you can also comment here).

I will work on a solution for this.

[cmeeren]

In Aurora even the jQuery orientation change workaround doesn't work (landscape image is used both initially and after orientation changes). FF Beta (on Google Play) works like the current stable version: Initially landscape is shown, but the orientation change workaround works.

In the bug you linked to, I see it is marked as fixed in firefox41. The Aurora I downloaded was 40.

[cmeeren]

I notice that adding window.dispatchEvent(new Event('resize')); after the JS fix will randomly fix the problem. The slider is correctly updated after page load some of the time. No idea what causes this randomness (caching?). I have tried by closing and re-opening the browser and navigating to the site, refreshing the page, clicking the logo to "refresh" the front page, but it seems somewhat random. If it first starts working when clicking the logo to refresh the page, it works whenever I do that, until I refresh the page, then it starts over again.

Note that I have not updated the public site with this new line of code.

Anyhow, this seems to be something picturefill should take care of, given what picturefill is and tries to do. Am I right?

[cmeeren]

I have discovered that the correct image is loaded if I place <source ... media="(orientation: portrait)"> before <source ... media="(orientation: landscape)">. It might seem that FF for Android uses the first of the two sources. This happens regardless if I use picturefill or not, though FF will not respond to orientation changes without the fix you referred to.

It does not fix the problem in Aurora, though I'm not overly concerned about that.

[aFarkas]

@cmeeren
First all thank your for you investigation on this. Will come back with a fix for this. Until then your finding (switching source elements) should help.

[cmeeren]

Great, looking forward to the fix!

[cmeeren]

Oh, and I've discovered that the ordering fix does not always work. Most of the time, but every now and then there is a page load where it doesn't work.

[aFarkas]

I tried to write a workaround for this. Please try the following script:
http://rawgit.com/scottjehl/picturefill/261d1d5ab5194827fe13743cb05a513306bf2b89/src/plugins/gecko-picture/pf.gecko-picture.js

I would like to have positive or negative feedback.

[cmeeren]

Thank you! Seems to work. I included your script last, and now the correct version is shown both initially and after after reorientation, no matter what the order of the <source> tags are.

However, for a brief moment while the page loads, the horizontal version shows even when the phone is in portrait orientation. The only way for me to avoid this is to change the picture's default img src to the portrait version AND remove the horizontal source altogether. If both of these requirements are not fulfilled, the landscape version is shown before the script (I assume) loads and works its magic.

I find that weird. I could understand if FF loads the picture's default img src, but even if this points to the portrait version, the landscape version still loads briefly if it is present in a <source> tag.

[aFarkas]

https://bugzilla.mozilla.org/show_bug.cgi?id=1063707

[cmeeren]

Great! When will PF3 be released?

[aFarkas]

We will release an alpha version soon. You should use it.

[cmeeren]

Thanks. Will it be stable enough for production use? Mind dropping a comment here when it's released?