Fix transition from 'auto' in Safari

BKWLD · Apr 21, 2014 · 761a160 · 761a160
1 parent a3af800
commit 761a160
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "tram",
   "description": "Cross-browser CSS3 transitions in JavaScript",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "homepage": "https://github.com/BKWLD/tram",
   "authors": [
     "Dan Rogers <dan@danro.net>",

diff --git a/dist/tram.js b/dist/tram.js
@@ -1,5 +1,5 @@
 /*!
- * tram.js v0.7.6-global
+ * tram.js v0.7.7-global
  * Cross-browser CSS3 transitions in JavaScript
  * https://github.com/bkwld/tram
  * MIT License
@@ -754,8 +754,11 @@ window.tram = (function (jQuery) {
       this.active = true;
       value = this.convert(value, this.type);
       if (this.auto) {
-        // when transitioning from 'auto', we must always reset to computed
-        this.update(this.get());
+        // when transitioning from 'auto', we must reset to computed
+        if (this.el.style[this.name] == 'auto') {
+          this.update(this.get());
+          this.redraw();
+        }
         if (value == 'auto') value = getAuto.call(this);
       }
       this.nextStyle = value;

diff --git a/examples/to-from-auto.html b/examples/to-from-auto.html
@@ -17,7 +17,7 @@
 <body>
 
   <p>
-    Transition height from pixels to 'auto'.
+    Transition pixels -> 'auto'.
   </p>
 
   <div class="test test1">
@@ -39,7 +39,7 @@
   </script>
 
   <p>
-    Transition width from 'auto' to pixels.
+    Transition 'auto' -> pixels.
   </p>
 
   <div class="test test2"></div>
@@ -50,8 +50,8 @@
     test2.width('auto');
 
     tram(test2)
-      .add('width 500ms ease')
-      .start({ width: 200 })
+      .add('width 1s ease')
+      .start({ width: 0 });
 
   </script>
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tram",
   "description": "Cross-browser CSS3 transitions in JavaScript",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "homepage": "https://github.com/bkwld/tram",
   "author": "Dan Rogers <dan@danro.net>",
   "license": "MIT",

diff --git a/src/tram.js b/src/tram.js
@@ -456,8 +456,11 @@
       this.active = true;
       value = this.convert(value, this.type);
       if (this.auto) {
-        // when transitioning from 'auto', we must always reset to computed
-        this.update(this.get());
+        // when transitioning from 'auto', we must reset to computed
+        if (this.el.style[this.name] == 'auto') {
+          this.update(this.get());
+          this.redraw();
+        }
         if (value == 'auto') value = getAuto.call(this);
       }
       this.nextStyle = value;

diff --git a/support/styles/example.css b/support/styles/example.css
@@ -71,8 +71,8 @@ p {
 .row {
   clear: both;
   max-width: 700px;
-  *zoom: 1;
 }
+
 .row:after {
   content: "";
   display: table;