1156898 - Whenever i open tastebuds.fm there is somewhat clutter on the homepage i.e. the texts come over the pictures and vice versa.

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect, P3)

Description

[anjanikmr51]

Attachment: tmp_18956-Screenshot_2015-04-21-23-56-24-272726017.png

User Agent: Mozilla/5.0 (Android; Mobile; rv:37.0) Gecko/37.0 Firefox/37.0
Build ID: 20150413180005
Firefox for Android

Steps to reproduce:

Go to tastebuds.fm home page


Actual results:

Whenever i open tastebuds.fm there is somewhat clutter on the homepage i.e. the texts come over the pictures and vice versa.


Expected results:

There should be proper alignment and placements of text and images and vedios. 
Same page just looks perfect in chrome

Comment 1

[anjanikmr51]

Comment on attachment 8595484 [details]
tmp_18956-Screenshot_2015-04-21-23-56-24-272726017.png

This bug was encountered in firefox for android in Motorola Moto E.

Comment 2

[Kevin Brosnan [Ex-Mozilla]]

The screenshot makes me think this is a webcompat issue. Mike would you have a look. Sadly this site requires a user account access any of its content.

Comment 3

[Mike Taylor [:miketaylr]]

Sure thing, I just made a test account.

Comment 4

[Mike Taylor [:miketaylr]]

So for reasons I don't fully understand right now, if you kill the explicit height on the following div, the site looks the same as it does in iOS Safari (from the mobile_prod.css file):

#activityStream .title {
    height: 42px;
}

Let's move this to Tech Evangelism.

Comment 5

[Mike Taylor [:miketaylr]]

There's more going on here.

.clear,.ui-body-c .user.clear {
  display:-webkit-box
}

That needs some display: flex love. And then some more CSS tweaks to get everything else to layout correctly. (I have to split right now, so will come back to this, before setting to [contactready]).

Comment 6

[Karl Dubost💡 :karlcow]

This should be fixed by webkit css preferences.

Comment 7

[Mike Taylor [:miketaylr]]

(In reply to Karl Dubost :karlcow from comment #6)
> This should be fixed by webkit css preferences.

Still an issue. I guess we don't fully understand the problem. I have a test account if someone wants to dig in, just ping me.

Comment 8

[Adam Stevenson [:adamopenweb]]

Let's reach out to them and see if they can fix it. Email sent to [e-mail]

Comment 9

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 10

[Raul Bucata]

For me, the issue seems like a website bug, and not a compatibility bug now, as the name of the users and locations are hidden inside the image placeholders, as the letters seem to be integrated inside the pictures, and a glimpse of the last letters is barely seen on both Chrome and Firefox:

https://prnt.sc/-T_WnsrfJxJ8

Karl, is the issue similar for you on other browsers?

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2015869419 -🦎100.0a1-20220317092857🦎)/Chrome Mobile Version 99.0.4844.73
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Comment 11

[Karl Dubost💡 :karlcow]

Not a webcompat bug. This is happening everywhere.