Incorrect position: fixed; rendering when child of position:relative/sticky.

• Component: CSS
• Status: RESOLVED FIXED

[Chris Rebert]

Created attachment 257494 [details]
Screenshot of incorrect Safari rendering

OS X Safari version: 8.0.7 (10600.7.12)
WebKit Nightly version: r186963
OS X version: Yosemite
iOS version: 8.4
Possibly related to: https://bugs.webkit.org/show_bug.cgi?id=122878
Original Bootstrap issue: https://github.com/twbs/bootstrap/issues/16814

It seems that WebKit/Safari places position:fixed elements incorrectly when they do not have a left/right/top/bottom property set on them and are a child of an element that is position:relative;left:X%;

See the attached screenshots. Safari renders the example differently from Chrome. IE11 and Firefox give the same result as Chrome.

To reproduce:
1. Open http://jsbin.com/rohemer in OS X Safari or iOS Safari.
2. Look at the red paragraph's text.

Actual result:
The red paragraph's text doesn't quite make sense, because part of it isn't visible.

Expected result:
The red paragraph's text makes sense because all of its text is visible.

[Chris Rebert]

Created attachment 257495 [details]
Screenshot of correct rendering from Chrome for comparison

[Chris Rebert]

Created attachment 257496 [details]
Copy of testcase webpage (in case JS Bin goes down)

[Chris Rebert]

Also filed a Radar for this:
<rdar://problem/21993128>

[Simon Fraser (smfr)]

Only happens when the position:fixed has 'auto' left.

[Chris Rebert]

There are now tests for this in the CSS2 test suite:
http://test.csswg.org/harness/test/css21_dev/single/left-offset-position-fixed-001/
http://test.csswg.org/harness/test/css21_dev/single/right-offset-position-fixed-001/

[zalan]

Created attachment 268137 [details]
Test reduction

[zalan]

Created attachment 268247 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 268247 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=268247&action=review

> Source/WebCore/rendering/RenderBox.cpp:3358
> +                    const auto& renderBox = downcast<RenderBox>(*current);
> +                    staticPosition -= renderBox.logicalLeft();
> +                    if (renderBox.isInFlowPositioned())
> +                        staticPosition -= renderBox.relativePositionOffset().width();

Would it make sense to have an accessor that return renderBox.logicalLeft() + renderBox.relativePositionOffset().width() for in-flow-positioned?

[zalan]

Created attachment 268466 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 268466 [details]
Patch

Clearing flags on attachment: 268466

Committed r194710: <http://trac.webkit.org/changeset/194710>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Chris Rebert]

Thank you!
Removed the entry from Bootstrap's wall: https://github.com/twbs/bootstrap/commit/6ab9e10efa9b3a195d5df26d9b901deaa3437cad

[zalan]

(In reply to comment #12)
> Thank you!
> Removed the entry from Bootstrap's wall:
> https://github.com/twbs/bootstrap/commit/
> 6ab9e10efa9b3a195d5df26d9b901deaa3437cad

Thanks for reporting it!