Sorry Steve,
this has been months ago, so I had to remove it.
The actual test is
http://smokingscript.com/test/iphone_overflow/, but I have compacted it a bit, to simplify the view:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>using overflow:hidden in iPad/iPhone devices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.clearFloats{
display: block !important;
float: none !important;
clear: both !important;
width: 0px !important;
height: 0px !important;
padding: 0px !important;
}
.page{
width: 400px;
height: 150px;
border-color: black;
border-style: solid;
}
.page > img{
display: block;
float: left;
}
.page > .text{
background-color: LightGray;
float: right;
width: 250px;
height: 100%;
overflow: hidden;
/* position: relative; */
}
.scroller > a{
text-decoration: none;
background-color: LightGray;
border-style: outset;
padding: 0px 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.scroller > a:first-child')
.click(function(){
var scrolledWrapper = $('.page > .text');
scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() - 9);
return false;
})
.next().click(function(){
var scrolledWrapper = $('.page > .text');
scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() + 9);
return false;
});
});
</script>
</head>
<body>
<div class="page">
<img src="sheep-and-sheep-dog.jpg"
alt="http://www.public-domain-image.com/animals/dog/slides/sheep-and-sheep-dog.html,
Courtesy of public-domain-image.com" />
<div class="text">
<p>Click the 'up' or 'down' buttons below, to scroll me...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus dictum neque eu facilisis.</p>
<p>Proin ut sapien lorem, eget accumsan dui. Quisque at ultrices massa.</p>
<p>Nunc enim nibh, condimentum sed semper vel, viverra eu diam.</p>
<p>Donec ac lectus vel mi consectetur molestie. Quisque vitae malesuada neque.</p></div>
<div class="clearFloats"></div>
</div>
<div class="scroller">
<a href="#">up</a>
<a href="#">down</a>
</div>
</body>
</html>
This page looks okay on all of my desktop browsers, my (emulated) Android, and (emulated) Opera Mobiles, and so no spill-over problems on them. I don't know about iPhones though.
The problem might have been resolved, since I have never again hear any complaints about my work (related to this demo). However, I have large doubt which actually have solved the overflow:hidden issue...
- My client has upgraded this iOS to version 5.
- the CSS for .page > .text{} ought to have fixed height, not in percentage.
Thanks,
Hendra