1711825 - Layout issues for big illustrations on sites on Fx Android

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Neha Kochar [:neha]]

Received some Android feedback from users when they were reading Fission blog post at https://hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/

"I enjoyed the illustrations, but you should try looking at your article in Firefox for Android: all pictures overflow to the right and it's not even possible to scroll horizontally to see the rest."
and from another user
"Does anyone else get ANNOYED by the UI of Mozilla's blog on mobile?
Looking at the navbar, the horizontal and vertical alignment is all over the place, the search input has no placeholder or label, background colors are inconsistent, and paddings are just bizarre."

I don't have an Android phone to confirm so filing this bug so the Android team can appropriate triage.

Comment 1

[Karl Dubost💡 :karlcow]

Needs Triage.

Comment 2

[Raul Bucata (⛔PTO until May 20🌴)]

We appreciate your report. I was not able to reproduce the issue. The images on the page are rendered and aligned as expected, with no issues regarding their position or overlapping items/article on the page. This has been tested on 3 different android devices.

Tested with:
Browser / Version: Firefox Nightly 92.0a1 (2015823243 -🦎92.0a1-20210718090829🦎)
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Suggestion: Try clearing cache/data/cookies, disable Ad-blocker (if available), or use a clean profile, and check again? If there are any changes made to the default settings of the browser (e.g. in about: config) please revert to the default settings and try again. Also, have the required cookies been accepted for this page?

Comment 3

[Raul Bucata (⛔PTO until May 20🌴)]

Oana, can you also take a look at this? Might be device dependent

Comment 4

[Oana Arbuzov [:oanaarbuzov]]

I could not reproduce the issue on my side either, images are displayed correctly, centered and fully visible.
https://prnt.sc/1rmfiay

For "Search" bar, indeed the label is missing, but it has placeholder.

<input type="search" name="s" class="search__input" placeholder="Search Mozilla Hacks" value="">

https://prnt.sc/1rmfwh3

I did no see any issues with background colors or padding.
Some elements on the page have low contrast between the text and the background color (e.g "Download Firefox" and "Sign up now" buttons)
https://prnt.sc/1rmg7v2

Comment 5

[Oana Arbuzov [:oanaarbuzov]]

I've also checked Mozilla Blog and some articles but I did not encounter any of the issue described.
It would be useful to get the links of the articles where the issues occur.

Tested with:
Browser / Version: Firefox Nightly 98.0a1 (🦎 98.0a1-20220202093701)
Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Neha can we get a bit more context on these issues or maybe contact the reporter to provide extra info?

Comment 6

[Neha Kochar [:neha]]

I just returned from my long leave. This was reported in a comment on HN a year ago, and no way for me to find that commentator now and contact them for more info on this. If this wasn't reproducible on an Android phone, then I'm ok to close this.