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 Rendering | Assignee: | 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
Jonathan Hurshman
2008-02-11 06:56:43 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.
(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. 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) 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. 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) Sorry, I dont know if I should use a webkit browser, but I had technical problems to submit my comments. 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). Unless I'm mistaken FF4 treats the reduced test case the same as WebKit now. 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! |