1139367 - Incorrect rendering of <div> with overflow and position attributes

Status: RESOLVED DUPLICATE of bug 738926

(Core :: CSS Parsing and Computation, defect)

Description

[squarefractal]

Attachment: dokuwiki-page.7z

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:31.0) Gecko/20100101 Firefox/31.0
Build ID: 20150122013852

Steps to reproduce:

1. Extract the attached ZIP archive.
2. Open the "start [My Wiki].html" file in Firefox (tested Firefox 36.0 & Nightly 39.0a2)

(It is to be noted that since the CSS file is generated by a CMS, it contains a lot of extraneous stuff that might not relate to the problem. A cleaned up and beautified file has been provided as css2.css.)


Actual results:

The contents of <div class="pagequery tableless" id="top-1394252414" style=""> appear to be shifted and squished to the extreme right of the page.


Expected results:

The contents of the <div> should appear in line with other elements of the page, as shown in the (to be) attached rendering.

The screenshot shows how the rendering looks like in IE and Chrome (both have the same rendering).

Comment 1

[squarefractal]

Attachment: Rendering in IE11 and Chrome

Comment 2

[Petruta Horea [:phorea], Desktop QA]

Reproduced using Nightly 39.0a1 under Win 7 64-bit.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Can someone please attach a version of the file compressed in a common compression format (e.g. zip)?

Comment 4

[Petruta Horea [:phorea], Desktop QA]

Attachment: dokuwiki-page.zip

Hope it works.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Thanks, that's perfect.

So the basic layout here is that the <div id="bar_top"> is floated left, then followed by the <main> which contains the <div id="top-1394252414">.  This last has non-visible overflow.

The spec says:

  The border box of a table, a block-level replaced element, or an element in the normal
  flow that establishes a new block formatting context (such as an element with
  'overflow' other than 'visible') must not overlap the margin box of any floats in the
  same block formatting context as the element itself. If necessary, implementations
  should clear the said element by placing it below any preceding floats, but may place
  it adjacent to such floats if there is sufficient space. They may even make the border
  box of said element narrower than defined by section 10.3.3. CSS2 does not define when
  a UA may put said element next to the float or by how much said element may become
  narrower.

Chrome and IE are clearing the <div id="top-1394252414"> past the float, while we're placing next to it.  That would be fine if there were enough space, but there is not.

The fact that we're not clearing in this case seems to be bug 738926.