fix: disable transition properties (niklasvh#2659)

ab180 · Aug 14, 2021 · f143166 · f143166
1 parent cd0d725
commit f143166
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/css/index.ts b/src/css/index.ts
@@ -143,7 +143,6 @@ export class CSSParsedDeclaration {
     textTransform: ReturnType<typeof textTransform.parse>;
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
-    transitionDuration: ReturnType<typeof duration.parse>;
     visibility: ReturnType<typeof visibility.parse>;
     webkitTextStrokeColor: Color;
     webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
@@ -221,7 +220,6 @@ export class CSSParsedDeclaration {
         this.textTransform = parse(context, textTransform, declaration.textTransform);
         this.transform = parse(context, transform, declaration.transform);
         this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
-        this.transitionDuration = parse(context, duration, declaration.transitionDuration);
         this.visibility = parse(context, visibility, declaration.visibility);
         this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
         this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);

diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts
@@ -233,6 +233,7 @@ export class DocumentCloner {
 
         if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
             const clone = this.createElementClone(node);
+            clone.style.transitionProperty = 'none';
 
             const style = window.getComputedStyle(node);
             const styleBefore = window.getComputedStyle(node, ':before');

diff --git a/src/dom/element-container.ts b/src/dom/element-container.ts
@@ -23,15 +23,13 @@ export class ElementContainer {
         if (isDebugging(element, DebuggerType.PARSE)) {
             debugger;
         }
+
         this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
 
         if (isHTMLElementNode(element)) {
             if (this.styles.animationDuration.some((duration) => duration > 0)) {
                 element.style.animationDuration = '0s';
             }
-            if (this.styles.transitionDuration.some((duration) => duration > 0)) {
-                element.style.transitionDuration = '0s';
-            }
 
             if (this.styles.transform !== null) {
                 // getBoundingClientRect takes transforms into account

diff --git a/tests/reftests/animation.html b/tests/reftests/animation.html
@@ -55,6 +55,11 @@
             transform: rotate(45deg)
         }
 
+        .transition-delay {
+            transition: 1ms;
+            transition-delay: 50ms;
+            transform: rotate(45deg)
+        }
 
         div {
             float: left;
@@ -84,5 +89,9 @@
 <div class="transitioned broken">
     <p>Hello</p>
 </div>
+
+<div class="transition-delay">
+    <p>Hello</p>
+</div>
 </body>
 </html>