Bug 17309

Summary: Absolutely-positioned div with "overflow: visible auto" doesn't allow enough width for contents when scrollbar is present
Product: WebKit Reporter: Jonathan Hurshman <jhurshman>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, bfulgham, mitz, nicolas.roumiantzeff, robert, vituko, zalan
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.5   
URL: http://www.pilgrimwebdesign.com/overflow.html
Attachments:
Description Flags
A reduction of the issue. none

Description Jonathan Hurshman 2008-02-11 06:56:43 PST
An absolutely-positioned div with overflow-x: visible and overflow-y: auto ought to permit its children to determine its width. In so doing, the width of the div's scrollbar needs to be accounted for, if it is visible. 

However, it appears that WebKit is not accounting for the scrollbar's width. It looks like it calculates its contents' height and width and sets its own width, then applies the scrollbar.

This leads to the div being too narrow for the contents, which either causes the contents to wrap, or if the contents are "white-space: nowrap", causes the div to scroll horizontally as well as vertically.
Comment 1 Jonathan Hurshman 2008-02-11 06:58:00 PST
Created attachment 19066 [details]
A reduction of the issue.

A reduction of the issue, showing one div with non-wrappable contents and another with wrappable.
Comment 2 Jonathan Hurshman 2008-02-13 13:29:08 PST
(In reply to comment #0)
> An absolutely-positioned div with overflow-x: visible and overflow-y: auto
> ought to permit its children to determine its width.

I should have added that the div in question has no explicit width.
Comment 3 vituko 2010-01-14 13:39:08 PST
532.5
this bug is still there
more exactly, it happens when the layer pushes the parent width

Ok :
-Absolute positioned layer
-Layer width smaller than parent width

Ko :
-Layer with float left : always pushes
-Layer width bigger than parent width : for example, when increasing the table cell default width

Ok :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Ko :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td style="width:100%">asdf</td></tr></table>

<table><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Until the patch comes, possible workaround : overflow-x:hidden + padding-right (scroll width)
Comment 4 vituko 2010-01-15 00:10:13 PST
Sorry

Until the patch comes, possible workaround : overflow-x:hidden + padding-right (scroll width) ...

... but the padding is seen in IE and Firefox, both work as expected. The behavior in Opera and Khtml is similar to Webkit.

overflow-x:visible also becomes auto in Firefox, but the vertical scroll width is computed and the box pushes its container without showing the horizontal scroll nor hiding some content.
Comment 5 vituko 2010-01-15 00:13:20 PST
532.5
this bug is still there
more exactly, it happens when the layer pushes the parent width

Ok :
-Absolute positioned layer
-Layer width smaller than parent width

Ko :
-Layer with float left : always pushes
-Layer width bigger than parent width : for example, when increasing the table cell default width

Ok :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Ko :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td style="width:100%">asdf</td></tr></table>

<table><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Until the patch comes, possible workaround : overflow-x:hidden + padding-right (scroll width)
Comment 6 vituko 2010-01-15 00:25:32 PST
Sorry, I dont know if I should use a webkit browser, but I had technical problems to submit my comments.
Comment 7 nicolas roumiantzeff 2010-12-05 23:29:57 PST
The issue is not yet fixed in current version of webkit browsers.
Tested on:
- Safari 5.0.3 (7533.19.4)
- Chrome 8.0.552.215

Our web application uses a scrollable div inside a table non-fixed width table. 

We currently use the workaround suggested in this log (thanks Vituko) but the problem is that the width of the scrollbars may vary from system to system (and perhaps resolution or settings).
Comment 8 Robert Hogan 2011-08-10 14:15:11 PDT
Unless I'm mistaken FF4 treats the reduced test case the same as WebKit now.
Comment 9 Ahmad Saleem 2023-02-16 13:27:06 PST
In attached test case, Safari 16.3 show horizontal scrollbar for first container similar to Firefox Nightly 112 while Chrome Canary 112 does not show horizontal scrollbar.

Just wanted to share updated testing results. Thanks!