Bug 147284 - Incorrect position: fixed; rendering when child of position:relative/sticky.
Summary: Incorrect position: fixed; rendering when child of position:relative/sticky.
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: zalan
URL: http://jsbin.com/rohemer/edit
Keywords: HasReduction, InRadar, W3CTest
Depends on:
Blocks: 159753
  Show dependency treegraph
 
Reported: 2015-07-24 17:35 PDT by Chris Rebert
Modified: 2016-08-29 23:50 PDT (History)
9 users (show)

See Also:


Attachments
Screenshot of incorrect Safari rendering (130.03 KB, image/png)
2015-07-24 17:35 PDT, Chris Rebert
no flags Details
Screenshot of correct rendering from Chrome for comparison (206.52 KB, image/png)
2015-07-24 17:42 PDT, Chris Rebert
no flags Details
Copy of testcase webpage (in case JS Bin goes down) (1.34 KB, text/html)
2015-07-24 17:44 PDT, Chris Rebert
no flags Details
Test reduction (169 bytes, text/html)
2016-01-03 08:06 PST, zalan
no flags Details
Patch (12.12 KB, patch)
2016-01-04 16:24 PST, zalan
no flags Details | Formatted Diff | Diff
Patch (14.97 KB, patch)
2016-01-07 10:24 PST, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Rebert 2015-07-24 17:35:32 PDT
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.
Comment 1 Chris Rebert 2015-07-24 17:42:31 PDT
Created attachment 257495 [details]
Screenshot of correct rendering from Chrome for comparison
Comment 2 Chris Rebert 2015-07-24 17:44:42 PDT
Created attachment 257496 [details]
Copy of testcase webpage (in case JS Bin goes down)
Comment 3 Chris Rebert 2015-07-24 17:59:34 PDT
Also filed a Radar for this:
<rdar://problem/21993128>
Comment 4 Simon Fraser (smfr) 2015-07-25 09:09:11 PDT
Only happens when the position:fixed has 'auto' left.
Comment 6 zalan 2016-01-03 08:06:44 PST
Created attachment 268137 [details]
Test reduction
Comment 7 zalan 2016-01-04 16:24:54 PST
Created attachment 268247 [details]
Patch
Comment 8 Simon Fraser (smfr) 2016-01-04 17:08:32 PST
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?
Comment 9 zalan 2016-01-07 10:24:14 PST
Created attachment 268466 [details]
Patch
Comment 10 WebKit Commit Bot 2016-01-07 12:01:40 PST
Comment on attachment 268466 [details]
Patch

Clearing flags on attachment: 268466

Committed r194710: <http://trac.webkit.org/changeset/194710>
Comment 11 WebKit Commit Bot 2016-01-07 12:01:47 PST
All reviewed patches have been landed.  Closing bug.
Comment 12 Chris Rebert 2016-01-07 14:32:42 PST
Thank you!
Removed the entry from Bootstrap's wall: https://github.com/twbs/bootstrap/commit/6ab9e10efa9b3a195d5df26d9b901deaa3437cad
Comment 13 zalan 2016-01-07 14:36:04 PST
(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!