overflow:hidden element overlaps floating element when placed at the top of the container

RESOLVED DUPLICATE of bug 290146

Status

()

Core
Layout: Floats
RESOLVED DUPLICATE of bug 290146
3 years ago
3 years ago

People

(Reporter: Uwe, Unassigned)

Tracking

({testcase})

31 Branch
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140716183446

Steps to reproduce:

This example does work on all browsers but Firefox.

http://css-tricks.com/minimum-paragraph-widths/


Actual results:

The :before pseudo-element does not break, but the floating element overlaps with the :before element.


Expected results:

The :before pseudo-element should break if a floating element starts overlapping. A real element with the same CSS-rules does that.

Comment 1

3 years ago
Work as expected in current Nightly, compared with Safari and Chrome.
Are you able to reproduce with a new profile? You may add a screenshot what it looks like on your system.
Flags: needinfo?(ruben.grimm)
(Reporter)

Comment 2

3 years ago
Here is a better example, that does not work as expected for me: http://jsfiddle.net/vUB24/1/

It works in Chrome, though.
Flags: needinfo?(ruben.grimm)
(Reporter)

Comment 3

3 years ago
Created attachment 8467707 [details]
Firefox does not break the text
(Reporter)

Comment 4

3 years ago
Created attachment 8467708 [details]
Chrome does

Comment 5

3 years ago
https://css-tricks.com/examples/MinParagraphWidth/
Does the third example work for you?

Updated

3 years ago
Component: General → Layout: Floats
(Reporter)

Comment 6

3 years ago
Yes, the third example does work for me, but I can't really see the difference to my fiddle-example.
That's what confused me. I tried this "trick" on my homepage and it didn't work and since it worked in Chrome I thought it had to be a Firefox/Gecko bug.
Created attachment 8476320 [details]
testcase

It's the "overflow: hidden" that causes the problem, not :before.
Also, adding a border-top so that the "overflow: hidden" block
isn't at the very top of the container seems to fix it.
Bug 290146 comment 5 makes me think this is the same underlying problem.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Keywords: testcase
OS: Windows 7 → All
Hardware: x86_64 → All
Resolution: --- → DUPLICATE
Summary: :before pseudo-element won't break on floating elements → overflow:hidden element overlaps floating element when placed at the top of the container
Duplicate of bug: 290146
You need to log in before you can comment on or make changes to this bug.