Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed position misbehaviour in IE11

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #204025
    typo_78
    Participant

    I am experiencing elements position misbehaviour into my page, in IE(11) only; live link here. The logotext, the menu and the left sidebar text, remain in place doesn’t move with the wrapper when the left slider is open (clicking on info+ button). I’ve read about position: fixed + transition in IE problems.

    I’ve tried to apply position: expression(fixed); to the header but something went wrong and the wrapper receive a brake-movement at open/closing slider. (The sidebar didn’t work with position: expression(fixed);)

    Also I’ve tried to tweak the css modifying the element position values in static/ absolute but without succees.

    .header {
      position: absolute;
    }
    
    .bar-side {
      position: absolute;
    }
    

    These will work with the slider but also will move on vertical scroll.If I ca fix that somehow, could be a solution.

    Tests are made in full screen, the theme is not for mobile screens.Any thoughts?

    #204032
    typo_78
    Participant

    If this helps for someone, for a quick solution add transform separately for IE, in IE only css hack.

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

    special thanks to @afelixj

    #204037
    typo_78
    Participant

    Hey there, I guess that you reffer at

    /* Header Height */
    .header {
    height: ;
    }

    this is just a theme custom field left blank. True, now everything is looking good, but if you remove the above IE hack from the IE console the things will be as described in the first post.

    Anyway, lately, I’ve discovered that this hack will fork with one exception. In fullscreen sliders (revolution slider) like we have here for exemple, will not work in IE11. Please try to compare with Chrome/Firefox to see the difference, clicking on infos+ gold button. Any sugestions?

    LE: here is the solution

    special thanks to @afelixj

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.