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

Status: RESOLVED DUPLICATE of bug 1387152

(Core :: Layout, defect)

Description

[Mike Kaply [:mkaply]]

Attachment: 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.

Comment 1

[Kohei Yoshino [:kohei]]

On Firefox, removing the `flex` property from `.index-list-main.showleft .index-list-main-text` solves the issue.

Comment 2

[Thomas Wisniewski]

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.

Comment 3

[Mike Kaply [:mkaply]]

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.

Comment 4

[Daniel Holbert [: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.)

Comment 5

[Eric Tsai (no more review request accepted)]

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?

Comment 6

[Bingqing Li]

(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.

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 2

Comment 9

[Daniel Holbert [:dholbert]]

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.

Comment 10

[Thomas Wisniewski]

Note that this is now fixed (on the latest nightlies at least) by the resolution of bug 1387152.

Comment 11

[Daniel Holbert [:dholbert]]

Thanks for confirming that, Thomas! I'm going to resolve this as a dupe of that bug.