search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
746 stars 66 forks source link

reddit.com - Incorrect display of images from albums #63279

Closed yaomtc closed 3 years ago

yaomtc commented 3 years ago

URL: https://reddit.com

Browser / Version: Firefox Mobile 83.0 Operating System: Android Tested Another Browser: Yes Chrome (Vanadium)

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: When I tap a thumbnail on the front page or on a subreddit that expands to view an image set / album, the image is so far zoomed in that it's unusable. When I open the post first (to see the comments) I can see the whole image, but for some reason the frame is extremely tall so I have to scroll down quite a bit to see the image.

View the screenshot Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

yaomtc commented 3 years ago
View the screenshotScreenshot
yaomtc commented 3 years ago
View the screenshotScreenshot
softvision-oana-arbuzov commented 3 years ago

Thanks for the report, but I'm not able to reproduce the issue. For me the images are displayed correctly and fit the screen. image image image image

Tested with: Browser / Version: Firefox Nightly 201209 (🦎 85.0a1-20201209034903) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

@yaomtc could you try clearing cache/data/cookies, or use a clean profile, and check again?

yaomtc commented 3 years ago

Hi @softvision-oana-arbuzov, none of those are albums / image sets. Those are all just single images, which work fine.

softvision-oana-arbuzov commented 3 years ago

@yaomtc thanks for the that, I did not see any difference between single image and album, but I searched for the one in the screenshot now and I was able to reproduce it. URL: https://www.reddit.com/search?q=A%20mustang%20in%20the%20wild! image

Note: The issue does not occur in Chrome.

Tested with: Browser / Version: Firefox Nightly 201210 (🦎 85.0a1-20201210092800) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Moving to Needsdiagnosis for further investigation.

karlcow commented 3 years ago 

/* Inline #1 | https://www.reddit.com/search?q=A%20mustang%20in%20the%20wild */

.GalleryPostContent .slideshowContainer {
  /* height: 100%; */
}

.GalleryPostContent .imagesWrapper, .GalleryPostContent .slideWrapper {
  /* height: 100%; */
}

Removing these two fixes the issue. It would be good to contact reddit about it.

There's a difference with blink on the interpretation of 100% in this context. @dholbert

yaomtc commented 3 years ago

I've made a post on /r/mobileweb, as directed here: https://reddit.zendesk.com/hc/en-us/articles/205687083-Report-a-Bug

Here is the post: https://www.reddit.com/r/mobileweb/comments/kwqni8/firefox_for_android_issue_incorrect_display_of/

karlcow commented 3 years ago

Thanks!

dholbert commented 3 years ago

Thanks for the ping, @karlcow - I can reproduce this but I haven't gotten to the bottom of what's going wrong here yet.

dholbert commented 3 years ago

This is something to do with quirks-mode. In particular: if I reproduce the bug, and then save the webpage (as "Web Page, Complete"), and then add <!DOCTYPE html> to the saved page, then the issue goes away. (It still reproduces in the saved copy without the doctype.)

So the issue here is that: (1) Reddit is missing a doctype on this page, so they're triggering quirks mode. (They should have <!DOCTYPE html>, to get more-reliably-interoperable/modern rendering behavior). (2) We apparently have a slightly different quirky behavior (as compared to Chrome) for percent height in the particular layout scenario that's being triggered here (but if the page is rendered in standards mode, our behavior matches Chrome & matches what Reddit expects).

I'll file a bug in bugzilla & see if there's an easy fix on our end; but in the meantime, Reddit should strongly consider adding a doctype declaration, as noted above.

dholbert commented 3 years ago

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1687557 to investigate further in Gecko.

softvision-raul-bucata commented 3 years ago

The issue is no longer reproducible:

Screenshot 2021-06-07 180319

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

Closing this as FIXED