FX, CSS3 et IE9

**rollbich** · 03/06/2012, 23h54

bonjour,
J'essaie d'utiliser Mootools pour faire une fonction scale avec animation en utilisant FX. IE9 a des comportement bizarres sur une meme ligne de code suivant si la class créée est un 'extends FX' ou si on crée une instance de FX et qu'on redefinit la fonction set.
Explication avec les 2 codes, en rouge sont les 2 lignes identiques qui posent problèmes. Une explication ??

1-code avec la class qui étend FX

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>TITLE</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css">
body { margin: 0; padding: 0; }
	
#container { 
position: absolute; overflow: hidden;
width: 640px; height: 480px; 	margin 0;
top: 100px; left: 100px; }

#kenburns { 
position: relative; width: 640px; height: 480px; margin: 0; 
background: transparent url(640-image1.jpg) no-repeat top left; }
</style>
<script type="text/javascript" src="mootools-core-1.4.5.js"></script>

<script type="text/javascript">
Fx.Scale = new Class({

  Extends : Fx,

  options : { origin : 'left top' },

  initialize : function(element,options) {
    this.element = $(element);
    this.parent(options);
    this.element.style['msTransformOrigin'] = this.options.origin;
    this.set = function(value) {
	  if (document.all) {
                // fonctionne sous IE9
		this.element.style['msTransform'] = 'scale('+value+')'; 
	  } else {
	    this.element.style['MozTransform'] = 'scale('+value+')';
	  }	
    }.bind(this)
  },

  start : function(from,to) {
    this.fromScale = from;
    this.toScale = to;
    this.parent(this.fromScale,this.toScale);
  }

});

window.addEvent('domready',function() {
  var elm = $('kenburns');
  var scale = new Fx.Scale(elm, {origin: 'center center'});
  scale.start(1,2);
});
</script>

</head> 

<body id="" class=""> 
  <div id="container">
    <div id="kenburns"></div>
  </div>
</body>
</html>

2- code avec une instance de FX

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
<head>
<title>Roll scale</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="mootools-core-1.4.5.js"></script>
<style type="text/css">
body { margin: 0; padding: 0; }
	
#container { 
position: absolute; overflow: hidden;
width: 640px; height: 480px; 	margin 0;
top: 100px; left: 100px; }

#kenburns { 
position: relative; width: 640px; height: 480px; margin: 0; 
          background: transparent url(640-image1.jpg) no-repeat top left; }	
</style>
  
<script type="text/javascript">

var Scaly = new Class({

	Implements: [Options],
	
	options: {
		iniscale: 1,
		increment: 0.05, 
		duration: 500
	},

	initialize: function(element, from, to, options) {
		this.element = $(element);
		this.setOptions(options);
		this.doit(from, to);
	},
	
	doit: function(from, to) {
		var fx = new Fx();
		fx.set = function(value) {
			if (document.all) {
                                // même ligne de code que dans 1
				// ne fonctionne pas sous IE9
				this.element.style['msTransform'] = 'scale('+value+')';
			} else {
				var style = "scale("+value+")";
				$('counter').set('html', style);
				this.element.style['MozTransform'] = 'scale(' + value + ')';
			}
		}.bind(this);
		fx.start(from, to);
	}
	
});

window.addEvent('domready', function(){
	var myFX = new Scaly("kenburns", 1, 2, {origin: 'center center'});
	
});

</script>
</head>

<body>
<div id="container">
  <div id="kenburns">
    <img src="640-image1.jpg">
  </div>
</div>
  <div id="counter"></div>
</body>
</html>

j'ai mis 3 fichiers attachés, il faut aussi mootools core 1.4.5 (ou autre version)
un grand merci pour ceux qui se penche dessus.

**vermine** · 04/06/2012, 07h52

Bonjour,

Ceci n'est pas du code MooTools :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
// fonctionne sous IE9
     this.element.style['msTransform'] = 'scale('+value+')'; 
} else {
     this.element.style['MozTransform'] = 'scale('+value+')';

Essayez toujours la méthode setStyle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
// fonctionne sous IE9
     this.element.setStyle('msTransform', 'scale('+value+')'); 
} else {
     this.element.setStyle('MozTransform', 'scale('+value+')');

Mais bon, le problème vient peut-être d'ailleurs.

**rollbich** · 04/06/2012, 12h18

bonjour et merci pour votre réponse

Dans le code 2, j'avais déjà essayé setStyle et j'ai aussi essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.element.set("style","-ms-transform:scale(" + value + ")");

malheureusement IE9 ne prend pas en compte la nouvelle value. Par contre dans le code 1 (avec extends FX), cette même ligne fonctionne dans IE9

C'est pour cela que je me dis que c'est la méthode utilisé dans mootools à savoir que lorsque j'étends la classe FX, tout marche et si je veux créé une nouvelle classe, instancier la classe FX et redefinir la méthode set, IE ne fait rien. (pourtant j'ai vérifié le timer mootools fonctionne)

Est-ce un bug de mootools, de IE9 ??? Je ne sais pas

**vermine** · 04/06/2012, 12h39

A vrai dire, je crois savoir que IE9 ne supporte plus document.all.

Êtes-vous sûr qu'il passe dans le if et non pas dans le else ?

**rollbich** · 04/06/2012, 14h23

J'ai enlevé le if...else, ça fonctionne pas...
je penche pour un bug mootools car sinon le code 1 fonctionnerait pas sous IE9.
je vais regarder en détail "github.com/mootools issues" et poster un ticket, les développeurs de mootools les regardent.

FX, CSS3 et IE9

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager