Bonjour

je rencontre un bug bizarre:

j'ai un div en overflow:auto, à l'interieur, j'ai un div qui est resizable.
Et bien lorsque je scroll mon div et qu'ensuite, je tente de "resizer" mon div resizable et bien celui-ci fait des "sauts" et se décale!

Voici un exemple pour appuyer ce je dis :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Resizable - Default functionality</title>
	<link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.draggable.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.resizable.js"></script>
 
	<link type="text/css" href="http://jqueryui.com/ui/demos.css" rel="stylesheet" />
	<style type="text/css">
	#resizable { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#resizable").draggable({
		   containment: 'parent', 
		   scroll: false
		});
 
		$("#resizable").resizable();
	});
	</script>
</head>
<body>
<div style="border:1px solid black; max-height:300px; max-width:300px; overflow:auto; position:relative;">
	<div style="height:400px; width:400px;">
		<div id="resizable" class="ui-widget-content">
			<h3 class="ui-widget-header">Resizable</h3>
		</div>
	</div>
</div>
 
</body>
</html>
Avez-vous déjà rencontrer ce bug?

Auriez-vous une solution à ce problème?

Merci par avance