Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fixed position misbehaviour in IE11

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.

like image 595
typo_ Avatar asked Jun 19 '15 16:06

typo_


People also ask

What does position fixed mean in HTML?

position: fixed; is basically the same as position: absolute; except that when the user scrolls the page, the element does not scroll with it, it just says exactly where it was. There are many pages that want to use this in order to position logos or menus. What is wrong with position: fixed;?

What is the problem with static position in CSS?

Well, ... nothing. The problem is that the most popular browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no positioning at all.

Is this fix supported in IE 7?

This fix is deprecated and is no longer supported (meaning that I will not help you to get it working with your pages). It was only written to fill the gap while waiting for Internet Explorer to implement fixed positioning. That has now happened in IE 7.

How do I isolate an element from Internet Explorer?

Some authors use the > CSS selector to isolate Internet Explorer and leave the element positioned absolutely in that browser, without the scrolling effect.


1 Answers

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

like image 179
Richard Peers Avatar answered Sep 20 '22 22:09

Richard Peers