Open Bug 1528043 Opened 3 years ago Updated 13 days ago

Blink and Gecko differ on how wide to make the input in this floating test-case

Categories

(Core :: Layout, defect, P3)

defect

Tracking

()

Webcompat Priority revisit
Tracking Status
firefox67 --- affected

People

(Reporter: twisniewski, Unassigned)

References

Details

(Whiteboard: [webcompat])

Attachments

(3 files)

Attached file test.html

In the attached test-case, the presence of the .icon div (among other potential things) seems to lead to Firefox and Chrome defaulting to different widths for the input element (which has width:100%).

Chrome renders it as widely as possible, while Firefox seems to ignore its 100% width.

Firefox will render it as widely as possible if I add width:100% to the form element, or remove the float:right.

Chrome makes the input element as wide as possible unless I remove the display-table-cell properties or the width:auto on the .icon div.

As such I'm not sure which layout component to file this under.

Whatever is causing this, Loblaws' mobile search bar is being crammed to the right edge of the viewport in Firefox because of it.

Flags: webcompat?
Attached file Testcase #2

Simplified testcase.

Attached file Testcase #2b

Same as #2, with 'display: table' added on the FORM.
In this case we render it the same as in Chrome.
I wonder if the difference is that Chrome skips the block box in both cases.

The difference in frame trees are:

Testcase #2:

FloatList <
  Block(form)
    TableWrapper(form)
      Table(form)

Testcase #2b:

FloatList <
  TableWrapper(form)
    Table(form)
Priority: -- → P3

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Webcompat Priority: --- → ?

See bug 1547409. Migrating whiteboard priority tags to program flags.

Webcompat Priority: ? → revisit
You need to log in before you can comment on or make changes to this bug.