Bug 15930 – Relatively positioned elements with negative percentage are not rendered

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: CSS

[Gérard Talbot (no longer involved)]

Safari 3.0.3 build 522.15.5 does not render relatively positioned block-level elements with negative percentage.

2 URLS can be examined for this bug:

A semi-complete webpage:
http://www.gtalbot.org/BrowserBugsSection/Safari3Bugs/LiquidScrollerTabMenu.html
(where "tab menu" are relatively positioned with negative percentage and they disappear)

A real complete webpage (and the original webpage with the problem)
http://www.straatadvocaat.org/samples/liquidScroller.html

Steps to reproduce:
===================
1- Load provided URL

Actual results in Safari 3.0.3 build 522.15.5:
----------------------------------------------
The blue bordered menu on the left is located below the vertical position of the bottom border of #content.

Expected results:
-----------------
The blue bordered menu on the left should be located closer to the top, at the same vertical position as the top-border of green bordered #content.

Notes
-----
- Firefox 2.0.0.9, Internet Explorer 7, Opera 9.24, Opera 9.50 all render the 3 URLs correctly, the same way and as expected.
- I searched for a duplicate and couldn't find any
- I carefully examined all 3 webpages and created 2 of them. I have not had time to create a real reduced, minimized testcase. This can be done without problem.

[Ingo Chao]

Created attachment 17971 [details]
Reduction

Reduction.
I think this is a duplicate of
http://bugs.webkit.org/show_bug.cgi?id=14749
Your tabmenu is not visible because it is not moving in top direction.
Regards

[Michael Bailey]

Created attachment 18824 [details]
A more comprehensive test case

If properly rendered you would see an evenly spaced grid of red boxes
with black boxes that have there top left corner at the red boxes
center.
No browser gets this test case 100% right but opera 9.5 gets 20/24 boxes right.
Safari only get 12/24.

[Michael Bailey]

Created attachment 18825 [details]
the png for the test case

You can also view it here:
http://www.yogurtearl.com/cssNegativePercentageTest.html

[Michael Bailey]

Created attachment 18826 [details]
Opera's rendering

[Michael Bailey]

Created attachment 18827 [details]
Opera's rendering

[Stein Magne]

I can confirm that the bug still exist. 
Tested with: Version 3.1.1 (5525.18) Webkit from 24th of May.
Verify the bug on http://www.gtalbot.org/BrowserBugsSection/Safari3Bugs/PositionRelativeTopNegativePercentage.html
and http://www.gtalbot.org/BrowserBugsSection/Safari3Bugs/LiquidScrollerTabMenu.html

[Gérard Talbot (no longer involved)]

> I think this is a duplicate of
> http://bugs.webkit.org/show_bug.cgi?id=14749

Hello Ingo,

Bug 14749 involves positive %tage along with negative margin-top. 
Bug 15930 involves only negative %tage top offset.
Maybe both bugs will involve the same patch but because of the distinctiveness of the summary+description of both bugs, I wish we would keep both bugs distinct, separate.

Another small issue. Your reduction testcase attachment 17971 [details] is excellent ...except that it uses no doctype declaration to trigger standards compliant rendering mode.

Regards, Gérard

[Gérard Talbot (no longer involved)]

Hello all,

When I try
http://www.gtalbot.org/BrowserBugsSection/Safari3Bugs/PositionRelativeTopNegativePercentage.html
and
http://www.gtalbot.org/BrowserBugsSection/Safari3Bugs/LiquidScrollerTabMenu.html
and
attachment 17971 [details]
with latest stable Safari 4.0 build 530.17, I get expected results. So, this bug has been FIXED.

Since no patch was submitted (or since we don't know which patch fixed this bug), I believe the proper way to resolve this bug is to resolve it as WORKSFORME.

So, resolving as WORKSFORME.

If this is wrong or inappropriate, please resolve accordingly.

regards, Gérard