Chrome scrollbars not disappearing when content is smaller than container

Question

I have an application that does a lot of resizing elements to ensure they fit inside a container. Sometimes the contents are meant to overflow, and sometimes they fit perfectly, so I use overflow:auto on the container.

The problem is in chrome, when the container size is shrunk, scrollbars appear for the container, even if when a new appropriately sized image is fetched, it is the right size to not require scrollbars.

An easy workaround, which would be fine for a simple application, is to set overflow:hidden and then, after a reflow, set overflow:auto again. However, in this app, the container doesn't (and really, shouldn't) know whether or not its content is going to scale to fit or not, or even when its finished loading (so it knows when to change the overflow). This is similar to what was mentioned here: http://www.google.ad/support/forum/p/Chrome/thread?tid=3df53193ac1cf08b&hl=en, but I don't think it's feasible for our circumstance

Is there another way I can make the scrollbars disappear when the content fits? I've attached the HTML to see the problem. Click the green to make it bigger, then again to make it smaller again. The scrollbars disappear in IE and firefox, but not chrome (which works once you click "Fix Scrollbars")

<!DOCTYPE html>
<html>
<head>
    <title>Scrollbar Woes</title>
    <script type="text/javascript">
        function toggle() {
          var img = document.getElementById('content');
          var span = document.getElementById('size');
          var newSize = 820 - parseInt(span.innerHTML)

          img.style.width = newSize + 'px';
          img.style.height = newSize + 'px';

          span.innerHTML = newSize;  
        };
        function fixSize() {  
          var img = document.getElementById('scroll');
          img.style.overflow = 'hidden';
          img.scrollWidth; // Calculate width to force a reflow
          img.style.overflow = 'auto';
        };
    </script>
    <style>
      * {
        margin: 0;
        padding: 0; 
      }            
      #scroll {
        width: 400px;
        height: 400px;
        overflow: auto;
      }
      #content {
        width: 390px;
        height: 390px;     
        background: green;
      }
    </style>
</head>
<body>
  <div id="scroll">
        <div id="content" onclick="toggle()">Click to change size</div>
  </div>

  <hr />

  Size = <span id="size">390</span>    
  <br />
  <a href="javascript:void(0)" onclick="fixSize();">Fix Scrollbars</a>  
</body>
</html>

score 2 · Accepted Answer · answered Dec 09 '10 at 03:04

2

Interesting problem...

As a workaround: Since you're changing the content, when you do it, can you set its size to, say, 1x1, force the re-flow, and then change it back (or removing them)? E.g., given your sample code:

img.style.width  = '1px';
img.style.height = '1px';
img.scrollWidth; // Calculate width to force a reflow
img.style.width  = newSize + 'px';
img.style.height = newSize + 'px';

answered Dec 09 '10 at 03:04

void

769
6
7

Seems to do the trick. I opted to hide it, reflow, show it. Unfortunately I have to do it for all the types of contents in my container - which is less than ideal. I'll leave the question open for a little bit to see if there's any other solutions, otherwise you've got it. – XwipeoutX Dec 09 '10 at 04:15
Thanks. It's a really weird behavior, I can't think of any other working approach (aside from Google fixing it). Oddly enough, I remember a really similar bug in IE, what versions did you try? – void Dec 09 '10 at 04:39
We only target IE 8, and there's no issue there. – XwipeoutX Dec 09 '10 at 04:43
Did you find any other fix yet? I have the same problem: good sizing but still showing scrollbars except when overflow is set to hidden and then back to auto. – Micaël Félix May 19 '14 at 07:18

score 0 · Answer 2 · edited Apr 13 '12 at 12:40

if you are working with an iframe...

without a work around, you should be able to manually set a scrollbar not to display in the html code. If you want greater flexibility - just dynamically create the iframe call and change its html accordingly. I tested this with google chrome 18.0 and it seems to work fine.

With a div, I imagine a similar chunk of javascript will work as long as you manipulate its styles, and ensure that in the code - you define the styles inline, in order to allow the javascript to have a property to manipulate. I have found this approach works cross browser for all modern browsers.

Chrome scrollbars not disappearing when content is smaller than container

2 Answers2