How to properly apply a css hack for IE11 transition misbehaviour

Question

I am experiencing elements transition misbehaviour into my page, IE(11) only;

The fullscreen revolution slider, remain in place doesn't move with the wrapper when the left slider is opening (clicking on info+ button like we have in Chrome/Firefox). Thanks to @afelixj, I've tried to use this css hack for IE in order to apply the tansition effect to the fullscreen slider too, adding .fullscreen-container but without result.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .header, #bar-left, .fullscreen-container{
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open .header, .shiftnav-open #bar-left, .shiftnav-open .fullscreen-container{
     left:590px;
  }
}

For comparation, please open this page in IE11 and Chrome and open/close the left slider using the info+ button.Live link here

Other non fullscreen rev sliders pages work fine using the left slider open/close in IE11/Chrome. live link here. Any thoughts?

LE: also I've tried to aaply to the #wrapper or .shiftnav-wrapper:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #wrapper{
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open #wrapper{
     left:590px;
  }
}

(In this second test, the result looks ok in fullscreen rev slider pages but if I open a non-fullscreen rev slider page, the content will be shifted with +590px over 590px. when the left slider is open).

Answer 1

Instead of the .fullscreen-container, can you try to apply the style to .forcefullwidth_wrapper_tp_banner class?