Only switch the container to relative positioning just before and during transitions.

Author: marnusw

CHANGELOG.md

@@ -1,6 +1,8 @@
 ### v3.0.1 (2 October 2017)
 
 * [BUGFIX] Prevent animating child selection with CSS rather than clearing with JS so form inputs don't lose focus on each update. (#50)
+* [BUGFIX] Switch the container to relative positioning on the render before the transitions start to avoid the glitch 
+           in Edge without using permanent relative positioning which is not an option. (#52)
 
 ### v3.0.0 (27 August 2017)
 

src/ReactCSSTransitionReplace.jsx

@@ -251,15 +251,17 @@ export default class ReactCSSTransitionReplace extends React.Component {
       ...containerProps
     } = this.props
 
-    // In edge there is a glitch as the container switches from not positioned
-    // to a positioned element at the start of a transition which is solved
-    // by applying the position and overflow style rules at all times.
+    const transitioning = this.shouldEnterCurrent || this.keysToLeave.length || Object.keys(this.transitioningKeys).length
+
     containerProps.style = {
       ...containerProps.style,
-      position: 'relative',
     }
-    if (overflowHidden) {
-      containerProps.style.overflow = 'hidden'
+
+    if (transitioning) {
+      containerProps.style.position = 'relative'
+      if (overflowHidden) {
+        containerProps.style.overflow = 'hidden'
+      }
     }
 
     if (height !== null) {
@@ -306,9 +308,11 @@ export default class ReactCSSTransitionReplace extends React.Component {
         React.createElement(childComponent,
           {
             key: currentKey,
-            // Positioning must always be specified to keep the
-            // current child on top of the leaving children
-            style: this.transitioningKeys[currentKey] ? positionAbsolute : {position: 'relative'},
+            // While there are leaving children positioning must always be specified to keep the current
+            // child on top; the current child can switch to relative positioning after entering though.
+            style: this.transitioningKeys[currentKey]
+              ? positionAbsolute
+              : (transitioning ? {position: 'relative'} : null),
           },
           this.wrapChild(
             currentChild,