17488 2008-02-22 06:41:23 -0800 If either overflow-x or overflow-y value is not visible, Webkit will change it to auto 2011-05-19 17:21:50 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC OS X 10.5 NEW InRadar P2 Normal --- 1 johnnyding.webkit webkit-unassigned bdakin farukates hyatt mitz simon.fraser vituko oldest_to_newest 71497 0 johnnyding.webkit 2008-02-22 06:41:23 -0800 See attached test cause, The first div has style: ""height:100px; overflow-y:hidden; overflow-x:visable; width:1px", which means the page author wants to make sure that the div box have hidden clipped content in y direction, but doesn't clip the content in x direction. In IE 6/7, Opera 9, I think they have correct behavior. But in FireFox 2/3, Safari, the overflow-y:hidden will cause the actual used value of overflow-x is auto, since the div's width is not long enough for creating horizontal bar, the content in x direction has been clipped. The reason of this problem is if either overflow-x or overflow-y value is not visible, Webkit will change it to auto. then the element will be treated as having overflow clip property. See function CSSStyleSelector::adjustRenderStyle (file: CSSStyleSelector.cpp, line:1201) and function RenderBox::setStyle (file: RenderBox.cpp, line:110). I did not see that The CSS 2(http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow) and CSS3(http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-overflow-x) specification have define the behavior just like webkit did. Is that a bug? Anyone can point me for this problem. The problem caused some contentz can't be displayed in webpages for some high traffic Chinese websites. 71498 1 19278 johnnyding.webkit 2008-02-22 06:42:23 -0800 Created attachment 19278 test case for this problem 71982 2 johnnyding.webkit 2008-02-26 01:19:51 -0800 How about using 2 flags: m_hasOverflowXClip, m_hasOverflowYClip instead of using m_hasOverflowClip, then we can discriminationally deal with clipped content in either x or y direction. 76045 3 farukates 2008-04-01 00:29:50 -0700 The reason why your test case breaks is because it's spelled "visible" (not visable) — changing it to visible makes the JavaScript detect the property correctly. Nonetheless, the behavior is still incorrect: adding a test case that shows this in a different way. The combination of overflow-x: visible; overflow-y: hidden; (or vice-versa) is a desirable combination and should behave exactly as it reads: elements expanding outside the containing "viewport" should only be rendered along the x-axis but not along the y-axis. What doesn't get defined by the spec, however, is what happens to content that is outside _both_ x and y axes. Should elements always get clipped to exact rectangles? (by far easiest to implement) Which axis/setting gets precedence? Letting it be dependent on CSS property order AND allowing for non-rect rendering would be very tricky to implement I'm sure. 76047 4 20270 farukates 2008-04-01 00:31:12 -0700 Created attachment 20270 Overflow-x/y visible/hidden testcase The overflow-x: visible; should mean that on the x-axis, the element should still be rendered. Instead, it is being treated as overflow-x: scroll. 181119 5 vituko 2010-01-15 00:07:34 -0800 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. 356680 6 simon.fraser 2011-02-23 22:25:49 -0800 Firefox does the same thing. 406768 7 simon.fraser 2011-05-19 17:21:50 -0700 <rdar://problem/9473424> 19278 2008-02-22 06:42:23 -0800 2008-02-22 06:42:23 -0800 test case for this problem overflowxy_test.htm text/html 581 johnnyding.webkit PCFET0NUWVBFIEhUTUwgUFVCTElDICItLy9XM0MvL0RURCBIVE1MIDQuMCBUcmFuc2l0aW9uYWwv L0VOIj4NCjxodG1sPjxoZWFkPg0KPC9oZWFkPg0KPGJvZHkgbGVmdG1hcmdpbj0wIHRvcG1hcmdp bj0wPg0KDQo8ZGl2IHN0eWxlPSJoZWlnaHQ6MTAwcHg7IG92ZXJmbG93LXk6aGlkZGVuOyBvdmVy Zmxvdy14OnZpc2FibGU7IHdpZHRoOjFweCIgaWQ9ImZhY2UxIj4NCmNvbnRlbnQgaXMgYmxvY2sg ZWxlbWVudA0KPC9kaXY+DQoNCjxocj4NCjxzY3JpcHQ+DQp2YXIgZGl2T2JqID0gZG9jdW1lbnQu Z2V0RWxlbWVudEJ5SWQoImZhY2UxIik7DQpkb2N1bWVudC53cml0ZSgiRmlyc3QgZGl2J3Mgb3Zl cmZsb3cgcHJvcGVydHkgaXMgXCIiICsgZGl2T2JqLnN0eWxlLm92ZXJmbG93WCArICIgOiAiICsg ZGl2T2JqLnN0eWxlLm92ZXJmbG93WSArICJcIiIpOw0KPC9zY3JpcHQ+DQoNCjxocj4NCjxkaXYg c3R5bGU9IndpZHRoOjIwMHB4OyBvdmVyZmxvdy14OmhpZGRlbjsgb3ZlcmZsb3cteTp2aXNhYmxl OyBoZWlnaHQ6MXB4Ij4NCmNvbnRlbnQgaXMgYmxvY2sgZWxlbWVudA0KPC9kaXY+DQoNCjwvYm9k eT48L2h0bWw+DQo= 20270 2008-04-01 00:31:12 -0700 2008-04-01 00:31:12 -0700 Overflow-x/y visible/hidden testcase bug2b-overflowxy.html text/html 840 farukates PCFET0NUWVBFIGh0bWwgUFVCTElDICItLy9XM0MvL0RURCBYSFRNTCAxLjAgU3RyaWN0Ly9FTiIK CSJodHRwOi8vd3d3LnczLm9yZy9UUi94aHRtbDEvRFREL3hodG1sMS1zdHJpY3QuZHRkIj4KPGh0 bWwgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIGxhbmc9ImVuIj4KPGhlYWQ+ Cgk8bWV0YSBodHRwLWVxdWl2PSJjb250ZW50LXR5cGUiIGNvbnRlbnQ9InRleHQvaHRtbDsgY2hh cnNldD11dGYtOCIgLz4KCTx0aXRsZT5XZWJraXQgQ1NTIEFuaW1hdGlvbnMgdGVzdDwvdGl0bGU+ Cgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiIG1lZGlhPSJhbGwiPgpib2R5IHsKCWJhY2tncm91bmQ6 ICMwMDA7Cgljb2xvcjogI2ZmZjsKCXBhZGRpbmc6IDA7CgltYXJnaW46IDA7Cn0KI3ZpZXdwb3J0 IHsKCXdpZHRoOiAxNjBweDsKCWhlaWdodDogNTAwcHg7CgliYWNrZ3JvdW5kOiAjNjY2OwoJcG9z aXRpb246IGFic29sdXRlOwoJdG9wOiA1MHB4OwoJbGVmdDogNTBweDsKCW92ZXJmbG93LXk6IGhp ZGRlbjsKCW92ZXJmbG93LXg6IHZpc2libGU7Cn0KI3Rlc3Rib3ggewoJd2lkdGg6IDE2MHB4OwoJ aGVpZ2h0OiAyNTBweDsKCWxpbmUtaGVpZ2h0OiAyNTZweDsKCXRleHQtYWxpZ246IGNlbnRlcjsK CWNvbG9yOiAjZmZmOwoJYmFja2dyb3VuZDogI2I4YmI4MDsKCQoJcG9zaXRpb246IGFic29sdXRl OwoJdG9wOiAtMTUwcHg7CglsZWZ0OiAyMHB4OwoKfQoKPC9zdHlsZT4KCjwvaGVhZD4KPGJvZHk+ Cgo8ZGl2IGlkPSJ2aWV3cG9ydCI+CgoJPGRpdiBpZD0idGVzdGJveCI+CgkJVGhpcyBpcyB0aGUg dGVzdCBib3gKCTwvZGl2PgoKPC9kaXY+CgoKPC9ib2R5Pgo8L2h0bWw+