9

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.Tests are made in full screen, the theme is not for mobile screens.Any thoughts?

LE: I've found a possible solution that works with the slider in IE11: 

.header {
  position: absolute;
}

.bar-side {
  position: absolute;
}

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

typo_
  • 11
  • 2
  • 15
  • 37
  • Have you checked your HTML markup for standards compliance? IE hates invalid HTML. – Sparky Jun 19 '15 at 16:34
  • if you reffer to Markup validation procedure, It looks like there are a few errors but not related to the above described problem. [here is the result](https://validator.w3.org/check?uri=http%3A%2F%2Fneuegrid.com&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices#result). – typo_ Jun 19 '15 at 16:55
  • thank you, may b; unfortunately, for me it's pretty difficult to tell because I'm not so good in coding stuff, I'm just trying to understand how things work ... – typo_ Jun 19 '15 at 19:14

4 Answers4

12

This may be way too late, but I had a similar issue with position:fixed and IE11, for a full page DIV (by specifying top: 0; bottom: 0; left: 0; right: 0;). Worked fine on Chrome, Edge, Firefox and Opera, but IE11 displayed the DIV at way under the full viewport size, and with rounded corners that seem to have inherited somehow from the parent.

Playing with the IE11 developer tools, I found an alternate option suggested as a parameter for position - "-ms-page". Using position: -ms-page sorted the issue; preceding this with position: fixed allowed the other browsers to carry on regardless.

Hope this helps others with a similar problem...

Richard Peers
  • 121
  • 1
  • 2
3

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;
  }
}
Felix A J
  • 6,300
  • 2
  • 27
  • 46
  • That's it !!!! the header it's fixed in IE :) A++++ thank you very much.Is there any possibility to fix the sidebar too? – typo_ Jun 21 '15 at 09:20
  • The sidebar is part of the `wrapper`, it should translate with the `wrapper` like the `header` in IE ( if you'll open/close the slider in Chrome, Firefox is working :) – typo_ Jun 21 '15 at 09:29
  • the code is there but is not working ... can you please check too in IE? – typo_ Jun 21 '15 at 09:34
  • I really have no words to thank you. This is the right answer to fix the `position: fixed` misbehaviour in IE11, thank you, thank you, thank you ! I really appreciate it ! – typo_ Jun 21 '15 at 09:42
  • I really don't want to be rude but, do you have any idea how can I solve the same issue with a fullscreen slider? I've opened here a new question : http://stackoverflow.com/questions/30964355/transition-ie11-css-hack – typo_ Jun 21 '15 at 14:13
1

Move the header outside the .shiftnav-wrap and place it above it, and apply the translateX seperately for header movement.

.shiftnav-open header{
      transform: translateX(590px);
}

It is not good idea to depend on its movement relative to the outer div.

elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element - http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

Another solution, you can use the header as absolute positioned, inside the left div #shiftnav-info.

Felix A J
  • 6,300
  • 2
  • 27
  • 46
  • Thank you, I've tried to implement the first mehod. With the `header` inside the `.shiftnav-wrap` will work but without animation just start and end positions (not good). With `header` outside the `.shiftnav-wrap` doesn't work at all. I've tried the second method as well, positioning the `header` (as `: absolute`) inside the `div` `#shiftnav-info` using the IE console, the same result, didn't work unfortunately. Did you test these sugestions on IE console? How about the sidebar? – typo_ Jun 20 '15 at 17:45
  • For a quick solution, you can add an IE only CSS hack, and apply a transform seperately for IE. – Felix A J Jun 21 '15 at 08:35
  • It will be nice but how ? :) If I add `-ms-transform: translateX( ... px )` to the fixed element, in IE will be always translated to that defined position. Can you please formulate a clear example after you have a test in IE console? Thanks, – typo_ Jun 21 '15 at 08:44
  • transition also added ? – Felix A J Jun 21 '15 at 08:47
  • Unfortunately I'm not so good in coding stuff that's why I am asking for clear answers. could you be so kind and please reformulate your main answer also with transition applied in order to check and validate your solution? :) I'm reffering to the header and the left sidebar. – typo_ Jun 21 '15 at 08:51
1
ADD this script in your page. IE fixed position scroll issue fixed.

<script>
if(navigator.userAgent.match(/Trident\/7\./)) {
  document.body.addEventListener("mousewheel", function() {
    event.preventDefault();
    var weelDelta = event.wheelDelta;
    var currentOffset = window.pageYOffset;
    window.scrollTo(0, currentOffset - weelDelta);
  });
}
</script>
Mani Kandan
  • 59
  • 1
  • 6