Bug 71183
| Summary: | Incremental layout issue when box-sizing and positioning are used | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Lea Verou <lea> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | UNCONFIRMED | ||
| Severity: | Normal | CC: | ahmad.saleem792, simon.fraser, xelanosnhoj |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | http://jsbin.com/aqadoz/4/ | ||
Lea Verou
Hover over the 2nd box in the testcase. You will notice that the positioned pseudo-element does not move, even though it should, according to the first and third divs (which have the exact same styling as the 2nd one when hovered).
Testcase works fine in other browsers.
The bug is also present in Webkit nightlies, and I tested in both OSX and Windows.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Alex Johnson
I'm seeing the same issue when border-box-sizing is used: child element position does not update when the width of the parent element's border changes. (No pseudo-elements involved.)
Example:
http://jsfiddle.net/nonsensery/yjh7V/
Ahmad Saleem
Test case (from URL) - https://jsbin.com/aqadoz/4/edit?html,output
*** Safari Technology Preview 208 ***
Original hover works on second div now.
New problem: (with JS) div has same size and others (when hovered on second).
*** Chrome Canary 134 ***
(With JS) now have different default size (pre-hover).
*** Firefox Nightly 135 ***
Matches Safari.