1073574 - HTML table not displayed on wtatennis.com - renders to the right of a float, instead of below it

Status: RESOLVED DUPLICATE of bug 478834

(Core :: Layout: Floats, defect)

Description

[u421692]

1. Open http://m.wtatennis.com/default.aspx?s=rankings

Expected result:
A table containing player rankings should be displayed

Actual result:
There is a blank space where the table should be

Note: this site works fine on other browsers
I see nothing in the console logs:

18:48:20.487 GET http://m.wtatennis.com/default.aspx [HTTP/1.1 200 OK 1910ms]
18:48:22.508 GET http://m.wtatennis.com/ga.aspx [HTTP/1.1 200 OK 463ms]
18:48:22.633 GET http://a.adtech.de/addyn/3.0/327.0/0/0/-1/ADTECH;loc=100;grp=%5Bgroup%5D;KVabbr=undefined;alias=WTAROST_ROS_top-5;misc=1411746502363 [HTTP/1.1 200 OK 75ms]
18:48:22.635 GET http://www.google-analytics.com/__utm.gif [HTTP/1.1 200 OK 18ms]
18:48:23.058 GET http://www.google-analytics.com/__utm.gif

Comment 1

[Aaron Train [:aaronmt]]

I see the exact same thing in desktop too.

Comment 2

[Hallvord R. M. Steen [:hallvors]]

One style="float:left;width:100%" table pushes the rankings table off-screen. I'll attach a slightly minified demo. Not sure if this isn't a Gecko bug after all - both Chrome and IE agree on *not* floating the 100% wide table to the left of the other table.

Comment 3

[Hallvord R. M. Steen [:hallvors]]

Attachment: 1073574.htm - demoish, CSS and some of the markup removed. You should see the table.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (reduced)

Here's a reduced testcase, with an explicit fixed-size container element (so the layout doesn't depend on the size of the viewport).

In Firefox, the table (orange-bordered element) renders to the right of the float (gray-bordered element).  It overflows their container, as can be seen by the yellow background-color disappearing underneath it.

In Chrome, it renders below the float (lower down on the page), rather than overflowing to the right.

Also, either of the following changes will make Firefox match Chrome's rendering (wrapping the table instead of overflowing):
 - adding a border to the container
 - giving the container overflow: [auto,hidden, or scroll]

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (with examples of style that fixes it)

(In reply to Daniel Holbert [:dholbert] from comment #4)
> Also, either of the following changes will make Firefox match Chrome's
> rendering (wrapping the table instead of overflowing):
>  - adding a border to the container
>  - giving the container overflow: [auto,hidden, or scroll]

(Here's a testcase that includes the broken version & also versions with border & the various 'overflow' values, to demonstrate this.)

Comment 6

[Daniel Holbert [:dholbert]]

(FWIW: Bug 1106810 appears to be an instance of this same bug on the mobile version of another site -- backcountry.com -- as noted in bug 1106810 comment 8 and 9.)

Comment 7

[Daniel Holbert [:dholbert]]

This float-vs.-table layout issue seems to be breaking UI on multiple mobile sites -- we should probably prioritize it sometime soon.

(I'm open to working on it, though I don't know our float code particularly well, so I may not be the best person.  Though maybe that's not an excuse, because it may not be fresh in anyone's mind. :))

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: testcase 4: now with a block-level <img> instead of table

FWIW, this isn't table-specific. I get the same behavior if I replace "display:table" with "display:flex", or with a block-level <img> tag, as shown here.

So I think this is just a disagreement on how atomic block-level elements interact with floats, when there's not enough horizontal space for them to fit side-by-side.  Chrome makes the block-level thing clear to below the float; Firefox does not, with the exception of the somewhat strange special-cases shown in the testcase.

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Daniel Holbert [:dholbert] from comment #4)
> Created attachment 8496433 [details]
> testcase 2 (reduced)
...
> Also, either of the following changes will make Firefox match Chrome's
> rendering (wrapping the table instead of overflowing):
>  - adding a border to the container
>  - giving the container overflow: [auto,hidden, or scroll]

Note that in this testcase, putting a line of text above the table (either before or after the float) fixes it as well.

I think this is a duplicate of an existing bug about the test for whether to push down block-like things (blocks with overflow!=visible and tables) around floats not working correctly; it might be one of the existing dependencies of bug 25888 (the block part of which which would fix the problem more generally).

In general, the block part of bug 25888 (which I should probably split into a separate bug, and which I have some ancient work-in-progress patches for) is about fixing the block-pushing so that it considers floats over the whole height of the block that intersects floats instead of just the top.

Comment 10

[Daniel Holbert [:dholbert]]

Yup, I'm willing to bet this is a dupe of an old bug.

(Also, for the record: IE and Opera 12.16 (Presto) match Chrome's behavior on the attached testcase. So we're the odd one out here.)

Comment 11

[Daniel Holbert [:dholbert]]

Yeah, looks like this is bug 478834 (which itself has whiteboard status "DUPEME").