Chrome loads the page zoomed out fully so everything is visible Problematic on Safari (all work correctly in Chrome): Works correctly, all page content is reachable overflow-x: hidden - there should be no horizontal scrolling overflow: hidden commented out but would work regardless, there's no scrolling on the page There doesn't appear to be any scrolling on the page. Respecting overflow: hidden would actually improve the UX here Safari allows scrolling main frame a little which actually feels wrong since it shifts the UI out of view Appears intentional and correct - scrolling should occur only on the subscroller Overflow(-x): hidden still there but site works correctly in both Chrome and Safari (if overflow: hidden were respected). (Apple developer documentation) appears fixed No overflow: hidden today - site was fixed: It seems they fall into one of three buckets (mainly using 6S iOS 9): The should not scroll (just like on OS X Safari). The underneath the yellow box scrolls downward. Attempt to scroll the yellow box further downward (which is to say, apply a 'fling upward' gesture to the yellow box). Scroll the yellow box to its bottom, where there are 'Close' and 'Save changes' buttons, and lift your finger off the screen to ensure that the scroll gesture ends.ĥ. Open the attached testcase in iOS Safari.Ĥ. Lost to the sands of time, but is relevant & popular.ġ. This works correctly on OS X Safari, but doesn't work correctly on iOS Safari. Applying `overflow: hidden` to the `` should make it non-scrollable. For example in the demo below the horizontal overflow can be scrolled through whilst the text that extends beyond the height of the box is hidden. It’s also possible to manipulate the overflow of content horizontally or vertically with the overflow-x and overflow-y properties. The scrollbars will only show up if there is content that actually breaks out of the element. autoĪuto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them. Note: In OS X Lion, when scrollbars are set to only show when being used, scroll behaves more like auto, in that only needed scrollbars will show up. IOS’ momentum scrolling can be enabled for this value with -webkit-overflow-scrolling. Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other. Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content. So for example a user has their default font size set larger than you would expect, you may be pushing text outside of a box and hiding it completely from their view.

However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source). This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems.

This literally hides any content that extends beyond the box. The opposite of the default visible is hidden. Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up. The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. So in general, there is no reason to explicitly set this property to visible unless you are overriding it from being set elsewhere. If you don’t set the overflow property at all, the default is visible. Overflow comes into play more commonly when explicit widths and heights are set and it would be undesirable for any content to spill out, or when scrolling is explicitly being avoided. Unless a height is set, text will just push an element taller as well. Remember that text will naturally wrap at the end of an element (unless white-space is changed) so text will rarely be the cause of overflow.

inherit: sets the overflow to the value of its parent element.

initial: uses the default value which is visible.

auto: if the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.

This can be used with overflow-clip-margin to set the clipped area.

clip: content is clipped when it proceeds outside its box.

scroll: similar to hidden except users will be able to scroll through the hidden content.

hidden: overflowing content will be hidden.

This is the default value of the property

visible: content is not clipped when it proceeds outside its box.

Overflow scrolling iphone