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.

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;

}



.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? I would like CSS experts there to also see this issue and invite them to help me...

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

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

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:

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

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