...

View Full Version : CSS overflow:hidden doesn't work on Apple's iPhone - Safari device?



hdewantara
06-04-2012, 01:52 PM
Hello,
Sorry if I've posted in the wrong section.

I have been looking and testing for a simple CSS solution for this issue for 3 days, but still w/o any luck. Some said I have to use position:relative, but it won't work either. Anybody kind enough to give me any hints/ some suggestion,... please :)

Below is an example code for one page. Basically there's some text within text class <div> and I need them to be inside this <div>, always. So I use CSS rule overflow:hidden to achieve this and it works beautifully on my FF12, IE8, Safari5, Chrome19 and Opera11. However, someone told me that this long text had spilled over its container <div>, on his iPhone device.

N.B. text scrolling is provided by up and down links, hooked using jQuery's click() handlers, but I don't think this is related to the problem.



<!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;
}

.dynamic{
width: 500px;
height: 150px;
background-color: lightblue;
}
.dynamic > img{
display: block;
float: left;
}
.dynamic > .text{
background-color: lightgreen;
font-weight: bold;
float: right;
width: 350px;
height: 100%;
overflow: hidden;
/* position: relative; */
}

.scroller{
background-color: lightgray;
width: 60px;
}
.scroller > a{
float: left;
}
.scroller > a:first-child + a{
float: right;
}
</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 = $('.dynamic > .text');
scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() - 9);
return false;
})
.next().click(function(){
var scrolledWrapper = $('.dynamic > .text');
scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() + 9);
return false;
});
});
</script>

</head>
<body>
<div class="page">
<div class="dynamic">

<img src="sheep-and-sheep-dog.jpg"
alt="http://www.public-domain-image.com/animals/dog/slides/sheep-and-sheep-dog.html" />

<div class="text">

<p>Courtesy of <a href="http://www.public-domain-image.com" target="_blank">public-domain-image.com</a></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. Nunc enim nibh, condimentum sed semper vel, </p>

<p>viverra eu diam. 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>
<span class="clearFloats"></span>
</div>

</div>

</body>
</html>


A link to above example: http://bit.ly/Mr5Iac

Thanks,
Hendra

hdewantara
06-05-2012, 12:31 PM
Dear Mods,

Am I allowed to link this thread to Codingforums' HTML & CSS sub (http://www.codingforums.com/forumdisplay.php?f=13)? I would like CSS experts there to also see this issue and invite them to help me...:confused:

THanks,
Hendra

hdewantara
06-11-2012, 08:00 AM
Okay I cancel that, I understand that it would be considered a double-posts.
But would somebody please spare sometime to help me?

Or maybe a re-phrase to the question:
If iPhone couldn't recognize "overflow:hidden" style property of div, what should I use to properly make the content of a div (on iPhone) doesn't spill over its container?

Safari's reference hasn't mention this property quite explicitly:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1 (https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1)

Please help,
Hendra

hdewantara
06-11-2012, 08:04 AM
Okay I cancel that, I understand that it would be considered a double-posts.
But would somebody please spare sometime to help me?

Or maybe a re-phrase to the question:
If iPhone couldn't recognize "overflow:hidden" style property of div, what should I use to properly make the text content of a div (on iPhone) doesn't spill over its container?

Safari's reference hasn't mention this property quite explicitly:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1 (https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1)

Please help,
Hendra

StevenHu
12-12-2012, 11:11 PM
Your "link to above sample" does not work.

hdewantara
12-13-2012, 07:40 AM
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:


<!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

StevenHu
12-13-2012, 06:55 PM
OK, here's some feedback for you.

Overflow hidden works fine in the iPhone; however, it isn't optimized for the display size (it's too tiny and I had to drag it larger). Also, one must tap on the down button twice to reveal a line of text, so it is slow to use.

hdewantara
12-14-2012, 10:27 AM
Thanks for your feedback, Steve.
It is not easy to get one, especially in this Building for mobiles (http://www.codingforums.com/forumdisplay.php?f=70) category :(

And yes, I have ripped every mobile-optimization for that page so we could focus only on the overflow :)

StevenHu
12-14-2012, 04:06 PM
That's what I figured!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum