J'ai une application qui fait beaucoup d'éléments de redimensionnement pour s'assurer qu'ils s'intègrent dans un conteneur. Parfois, le contenu est destiné à déborder, et parfois ils correspondent parfaitement, donc j'utilise overflow: auto sur le conteneur. Le problème est en chrome, lorsque la taille du conteneur est réduite, des barres de défilement apparaissent pour le conteneur, même si une nouvelle image de taille appropriée est extraite, la bonne taille ne nécessite pas de barres de défilement.Les barres de défilement de chrome ne disparaissent pas lorsque le contenu est plus petit que le conteneur
Une solution de contournement facile, ce qui serait bien pour une application simple, est de définir un débordement: caché, puis, après une refusion, définissez le débordement: automatique à nouveau. Cependant, dans cette application, le conteneur ne sait pas (et ne devrait pas, vraiment) savoir si son contenu va s'adapter ou non, ou même quand son chargement est terminé (donc il sait quand changer le débordement) . Ceci est similaire à ce qui a été mentionné ici: http://www.google.ad/support/forum/p/Chrome/thread?tid=3df53193ac1cf08b&hl=en, mais je ne pense pas que ce soit faisable pour notre situation
Existe-t-il un autre moyen de faire disparaître les barres de défilement lorsque le contenu est adapté? J'ai joint le HTML pour voir le problème. Cliquez sur le vert pour l'agrandir, puis à nouveau pour le réduire. Les barres de défilement disparaissent dans IE et Firefox, mais pas le chrome (qui fonctionne une fois que vous cliquez sur "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>
Semble faire l'affaire. J'ai opté pour le cacher, le refaire, le montrer. Malheureusement, je dois le faire pour tous les types de contenu dans mon conteneur - ce qui est loin d'être idéal. Je vais laisser la question ouverte pour voir s'il y a d'autres solutions, sinon vous l'avez. – XwipeoutX
Merci. C'est un comportement vraiment bizarre, je ne peux pas penser à une autre approche de travail (à part Google qui le corrige). Curieusement, je me souviens d'un bug très similaire dans IE, quelles versions avez-vous essayé? – void
Nous ne ciblons que IE 8, et il n'y a pas de problème. – XwipeoutX