fix(FEC-8144, FEC-8024): black screen once seeking ie11 (#233)

order the bottom bar elements correctly and as a result remove unnecessary z-index
kaltura · May 6, 2018 · 7fc9a3f · 7fc9a3f
1 parent 0ed9cd7
commit 7fc9a3f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 9 deletions.
diff --git a/src/components/bottom-bar/_bottom-bar.scss b/src/components/bottom-bar/_bottom-bar.scss
@@ -10,6 +10,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
+  z-index: 1;
 
   .left-controls {
     float: left;

diff --git a/src/components/seekbar/_seekbar.scss b/src/components/seekbar/_seekbar.scss
@@ -47,7 +47,6 @@
       top: 0;
       left: 0;
       height: 100%;
-      z-index: 2;
       border-radius: $progress-bar-border-radius 0 0 $progress-bar-border-radius;
       background-color: $brand-color;
     }
@@ -59,13 +58,11 @@
       top: 0;
       left: 0;
       height: 100%;
-      z-index: 1;
       border-radius: $progress-bar-border-radius 0 0 $progress-bar-border-radius;
       background-color: rgba(255, 255, 255, 0.3);
     }
     .scrubber {
       position: absolute;
-      z-index: 3;
       cursor: pointer;
       display: block;
       top: -8px + $progress-bar-height / 2;
@@ -93,7 +90,6 @@
     width: 164px;
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
-    z-index: 10;
 
     .frame-preview-img {
       background-size: auto 100%;
@@ -107,7 +103,6 @@
     position: absolute;
     bottom: $progress-bar-height + 18px;
     left: 0;
-    z-index: 11;
     height: 22px;
     min-width: 48px;
     padding: 0 3px;

diff --git a/src/components/seekbar/seekbar.js b/src/components/seekbar/seekbar.js
@@ -492,15 +492,15 @@ class SeekBarControl extends Component {
         onTouchEnd={() => this.onSeekbarTouchEnd()}
         onKeyDown={(e) => this.onSeekbarKeyDown(e)}>
         <div className={style.progressBar}>
+          {this.renderFramePreview()}
+          {this.renderTimeBubble()}
+          <div className={style.virtualProgress} style={{width: virtualProgressWidth}}/>
+          <div className={style.buffered} style={{width: bufferedWidth}}/>
           <div className={style.progress} style={{width: progressWidth}}>
             {
               props.adBreak ? undefined : <a className={style.scrubber}/>
             }
           </div>
-          <div className={style.virtualProgress} style={{width: virtualProgressWidth}}/>
-          {this.renderTimeBubble()}
-          {this.renderFramePreview()}
-          <div className={style.buffered} style={{width: bufferedWidth}}/>
         </div>
       </div>
     )