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>
Interesting problem…
As a workaround: Since you’re changing the content, when you do it, can you set its size to, say, 1×1, force the re-flow, and then change it back (or removing them)? E.g., given your sample code: