Clipped Scrollbar and Border in Webkit

**Rain Lover** · 05-05-2014, 06:41 AM

Part of the textarea scrollbar and border is cut off:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Clipped Scrollbar and Border in Webkit</title>
    <style>
        textarea,
        iframe {
            display: block;
            width: 300px;
            margin: 0;
            padding: 0;
        }
        textarea {
            height: 200px;
            resize: none;
            outline: 0;
            border: solid red;
            border-width: 0 0 5px;
        }
        iframe {
            height: 0;
            border: 0;
        }
    </style>
</head>

<body>
    <textarea>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
    </textarea>
    <iframe srcdoc="<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>"></iframe>
</body>

</html>

DEMO

Why does it happen? What's the fix?

**coothead** · 05-05-2014, 10:28 AM

Hi there Rain Lover,

The cause of your problem appears to be...

Code:


iframe {
    height:0;
    border:0;
 }

If you don't want it behave oddly, why not just use this instead...

Code:


iframe {
    display:none;
 }

coothead

**jscheuer1** · 05-05-2014, 01:51 PM

I agree with coothead that it's the iframe and that styles used to conceal it are not working as intended in Chrome. This is easily seen if you add a paragraph with content between the textarea and the iframe. It works in Safari though, so it's not really a webkit issue. And I'm like 99% sure that Chrome isn't rendering this properly.

As to what to do about it. Coothead's idea works. But giving an element display none tells the browser that it doesn't have to parse it fully, leave any space for it, nor load any content for or in it (like images, other pages). In this simple example there's no problem with any of that except that its layout width will be ignored, at 0 px height though, that shouldn't be an issue. But if you were to want to manipulate the iframe later via javascript, it would be safer to use other methods to conceal it. Positioning it absolute and -3000px top and left would work for that and/or giving it visibility hidden. Either or both of these will hide it. Using the visibility property only would not take it out of the layout flow of the page though. That could be a good thing or not, depending upon what, if anything you wanted to do with it later.

**coothead** · 05-05-2014, 02:22 PM

Hi there John,

Paul O'Brian, over at SitePoint suggests using "position:relative" as the ideal cure.

I would, though, like to know our friend "Rain Lover's" reason for zeroing the width and height values.

coothead

**jscheuer1** · 05-05-2014, 02:47 PM

That seems very good (position: relative) and given the current problem as it's set out, nearly ideal (if you're worried about legacy IE browsers, there could be problems, but then you wouldn't use srcdoc for iframe, which is still, as of IE 11, unsupported*). But it really does depend upon why you want the iframe there, and what if anything would be done with the iframe later. Position relative will maintain the layout space, such that it is, whereas position absolute, used as I suggested would not. If that matters one way or the other, let that guide the decision.

*The srcdoc attribute shows up as an attribute of the iframe in the DOM view, so could be used in IE 11. But not as the document property of the 'page' in/'window' represented by the iframe.

**Rain Lover** · 05-05-2014, 05:18 PM

Originally Posted by coothead

Hi there John,

Paul O'Brian, over at SitePoint suggests using "position:relative" as the ideal cure.

I would, though, like to know our friend "Rain Lover's" reason for zeroing the width and height values.

coothead

Thanks for the solution, coothead!

I'm working on a small application in which the user can change the iframe height size -- even to 0. I'll show you the application and ask for your review and John's when I've finished it. Thanks again!

**Rain Lover** · 05-05-2014, 05:22 PM

Originally Posted by jscheuer1

I agree with coothead that it's the iframe and that styles used to conceal it are not working as intended in Chrome. This is easily seen if you add a paragraph with content between the textarea and the iframe. It works in Safari though, so it's not really a webkit issue. And I'm like 99% sure that Chrome isn't rendering this properly.

I don't have Safari as its Windows version seems to be a dead project for Apple company. But I can reproduce the same issue in Opera and that's why I called it a Webkit bug.
Thanks very much for the answer, anyway!

Thread: Clipped Scrollbar and Border in Webkit

Thread Tools

Search Thread

Clipped Scrollbar and Border in Webkit

Similar Threads

Help ! -webkit- & border issues with Chrome

Webkit Zoom Bug in Ultimate Fade-In Slideshow

How to fix script of TEXTAREA with no scrollbar and no border for Safari IE Firefox?

Style webkit resize handles?

[DHTML] Expanding Clipped Image

Bookmarks

Bookmarks

Posting Permissions