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.
1. Open http://jsbin.com/rohemer in OS X Safari or iOS Safari.
2. Look at the red paragraph's text.
The red paragraph's text doesn't quite make sense, because part of it isn't visible.
The red paragraph's text makes sense because all of its text is visible.
Created attachment 257495 [details]
Screenshot of correct rendering from Chrome for comparison
Created attachment 257496 [details]
Copy of testcase webpage (in case JS Bin goes down)
Also filed a Radar for this:
Only happens when the position:fixed has 'auto' left.
There are now tests for this in the CSS2 test suite:
Created attachment 268137 [details]
Created attachment 268247 [details]
Comment on attachment 268247 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=268247&action=review
> + 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?
Created attachment 268466 [details]
Comment on attachment 268466 [details]
Clearing flags on attachment: 268466
Committed r194710: <http://trac.webkit.org/changeset/194710>
All reviewed patches have been landed. Closing bug.
Removed the entry from Bootstrap's wall: https://github.com/twbs/bootstrap/commit/6ab9e10efa9b3a195d5df26d9b901deaa3437cad
(In reply to comment #12)
> Thank you!
> Removed the entry from Bootstrap's wall:
Thanks for reporting it!