overflow:auto and Mac browsers

Testing {overflow:auto} on the body tag and/or the html tag. This has been used to hide 'ghost' scrollbars in IE win, when there is not enough content to fill the viewport. This is also used to mimic position:fixed in IE win. Based on the results below, {overflow:auto} on either body and/or html is better hidden from other browsers than IE win, conditional comments can be used for it.

results

  1. body {overflow:auto} test 1
    • IE5 mac - page displays correctly
    • Gecko 1.0 and later - page displays correctly
    • Safari 1.0 and later - ok
  2. html {overflow:auto} test 2
    • IE5 mac - displays a blank page
    • Gecko 1.0 and later - page displays correctly, but the scrollbar is not fully operative and the contents cannot be scrolled.
    • Safari 1.0 or later - functions correctly, but losing the fontdeclaration on body
    • adding html, body {height:100%} fixes the problem in Mozilla. height need to be declared on both. (test 3)
  3. html, body {overflow:auto} test 4
    • IE5 mac - displays a blank page
    • Gecko 1.3 and later - page displays correctly (Gecko 1.0-1.2 display a blank page, unless a height (100%) is declared on both html and body.
    • Safari 1.0 and later: no possibility to scroll te page.
  4. Opera 5 and 6 do not appear to have any problems with the various settings above.

Some text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam libero velit, vestibulum vitae, congue ac, rhoncus eu, enim. Vivamus bibendum feugiat mauris. Ut id velit vitae diam porttitor pharetra. Aliquam vehicula tincidunt turpis. In faucibus pharetra velit. Vivamus magna. Ut nisl nisl, accumsan eget, malesuada id, euismod ac, ligula. Sed nulla. Praesent venenatis dolor non risus. Proin mollis. In ornare purus ut felis. Aliquam felis. Donec pede. Etiam aliquam. Suspendisse ultrices, urna non varius faucibus, turpis turpis pellentesque wisi, vitae dapibus nulla tortor et urna.

Aliquam fermentum, ligula sit amet porttitor lacinia, sapien mauris aliquet pede, in facilisis libero wisi quis enim. Aenean id mauris. Nam urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque euismod feugiat turpis. Pellentesque lacinia. Mauris vel nibh. Nulla quis eros eget velit hendrerit euismod. Aenean nunc nulla, vestibulum sed, lacinia ac, euismod vitae, velit. Maecenas mi. Phasellus vel quam et tellus pretium dignissim. Maecenas wisi pede, vestibulum vitae, faucibus vel, porta adipiscing, diam. Mauris dictum viverra tortor. Donec lacinia. Aenean aliquet molestie libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse posuere pede non ipsum.