How to properly apply a css hack for IE11 transition misbehaviour

倖福魔咒の 提交于 2019-12-13 04:38:46

问题


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).


回答1:


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



来源:https://stackoverflow.com/questions/30964355/how-to-properly-apply-a-css-hack-for-ie11-transition-misbehaviour

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!