Closed Bug 1382252 Opened 3 years ago Closed 2 years ago

Text doesn't display next to news stories on news.baidu.com website

Categories

(Core :: Layout, defect)

defect
Not set

Tracking

()

RESOLVED DUPLICATE of bug 1387152

People

(Reporter: mkaply, Unassigned)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [webcompat])

Attachments

(3 files)

Attached image Screenshot of problem
When visiting http://news.baidu.com/ with a Fennec (or Chrome Mobile) UA, the text next to the images does not display.

See attachment.

This is easily recreatable on desktop with a user agent switcher.
On Firefox, removing the `flex` property from `.index-list-main.showleft .index-list-main-text` solves the issue.
Component: Untriaged → Layout
Product: Firefox → Core
The divs to the right of the images with the news text (in the form <div class="index-list-main-text">) are given zero width in Firefox. I note that they have "flex:2", and changing that to "flex:2 auto" makes the text flex-grow as expected.

In addition, the parent element has both "display:flex" and "display:-webkit-box" specified, but -webkit-box has higher precedence. When I have it use "display:flex", the box flex-grows correctly.

Now in Chrome, -webkit-box also has precedence, but the box flex-grows regardless. So this would appear to be a quirk with our -webkit-box implementation. I'm adjusting the component/etc to match, and cc'ing dholbert.
Blocks: 1238668
Whiteboard: [webcompat]
dholbert:

Is this something that we're doing wrong or something to evangelize with Baidu?

We had this reported via a partner while testing Firefox on their phone, so it has high visibility for them.
Flags: needinfo?(dholbert)
(In reply to Mike Kaply [:mkaply] from comment #3)
> dholbert:
> 
> Is this something that we're doing wrong or something to evangelize with
> Baidu?

Firstly: yes, we should evangelize with Baidu -- specifically, we should ask that they reorder the declarations in their ".index-list-main.showleft" rule:
   .index-list-main.showleft{display:flex;display:-webkit-box;display:box;
https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/n/nvn/static/news/aio_1415db4.css

We should ask them to place "display:flex" *after* "display:-webkit-box;display:box;" there, so that they get the modern standardized layout mode by default (in browsers that support it -- and browsers that don't support it won't care one way or the other about the ordering).  This is general best-practice, and it's sufficient to fix this bug.

(In the meantime: it seems that we do have a bug with our -webkit-box emulation here, due to the fact that our -webkit-box emulation is using modern flexbox under the hood. I don't know yet what's going wrong, and our emulation is not intended to be perfect -- but I'll take a look in a debugger later today and see if there's anything we can do to avoid whatever's going wrong here.)
BingQing, according to :dholbert 's comment https://bugzilla.mozilla.org/show_bug.cgi?id=1382252#c4 could you help to contact Baidu for a quick fix?
Flags: needinfo?(bli)
(In reply to Eric Tsai from comment #5)
> BingQing, according to :dholbert 's comment
> https://bugzilla.mozilla.org/show_bug.cgi?id=1382252#c4 could you help to
> contact Baidu for a quick fix?

We've started the contact with Baidu. I'll give an update once we get replies.
Flags: needinfo?(bli)
I've got a fix for this on our end, over in bug 1382252, pending review (and then riding the trains).

We should still try to have Baidu fix this on their end, though -- they should order their CSS to *prefer* modern-flexbox and to have legacy-box as the *fallback* -- to have "display:flex" as the *last* display value in the rule quoted in comment 4, rather than the *first*.  We can track that outreach work in this bug.
Note that this is now fixed (on the latest nightlies at least) by the resolution of bug 1387152.
Thanks for confirming that, Thomas! I'm going to resolve this as a dupe of that bug.
Status: NEW → RESOLVED
Closed: 2 years ago
No longer depends on: 1387152
Resolution: --- → DUPLICATE
Duplicate of bug: 1387152
You need to log in before you can comment on or make changes to this bug.