IE8 & Opera Fixed Position Bug

Hi,
This is a follow up from a Fixed Position bug that was discovered in this recent thread.

A workaround was found for IE8 by using a floated parent for the fixed position child. Opera 10.10 suffers from the same problem and the float does not seem to work. Opera requires a page reload to correct the position.

I know about Opera’s redraw bug but there must be some sort of solution. All of my fixed position layouts are broken due to this bug. I don’t remember this problem with previous Opera versions or at least I did not notice it.

Here are two test cases:
AP Parent - IE8 & Opera Fixed Position Bug
Floated Parent - IE8 & Opera Fixed Position Bug

As mentioned in the thread above it is the relative position on the wrapper div that triggers the bug. There should be no reason for that to happen but that is what the bug is all about.

To test IE8 you just need to drag the bottom of the browser window down just as with testing a Sticky Footer.

Any Ideas?

Hi Ray, when I place the overflow auto on an absolute child of hte #fixed element it seems to clear it up in IE8/Opera.

It does involve more markup though :).

It doesn’t seem to like the overflow on a fixed element.

<div id="fixwrap">
            <div id="fixed">
              [B]<div style="overflow-y:auto;position:absolute;">[/B]
                <h3>Floated Parent</h3>
                <p>This div is position:fixed in modern browsers and overflow:auto; is set to insure access to content at reduced viewport heights.</p>
                <p>This div is position:fixed in modern browsers and overflow:auto; is set to insure access to content at reduced viewport heights.</p>
                <p>This div is position:fixed in modern browsers and overflow:auto; is set to insure access to content at reduced viewport heights.</p>
              [B]</div>[/B]
           </div>
        </div>

Hi Ryan,
From looking at the code you just posted I am guessing you were working with the floated parent version. IE8 is fine with that as we concluded in the thread I linked to. It is Opera 10 that is having problems with both of the test cases.

I just downloaded Opera 9.64 to make sure I was not loosing my mind since I did not recall any problems in the past.
Sure enough Opera 9.64 is just fine with both of those test cases.

The problem is not the overflow:auto on the fixed div. The problem is that Opera 10 is not keeping it positioned at bottom:50px; at all times. The background color is set on the fixed sidebar to show top:100px (header) and bottom:50px; (footer).

I did not see any effect that your inner AP div with overflow:auto; had on the positioning of the fixed element in Opera 10.

After testing in Opera 9.64 I have confirmed that a page redraw is not needed to keep the fixed div at bottom:50px;

I updated the test cases with footers just to make it clear what the 50px was for.

It doesn’t seem to like the overflow on a fixed element.

I do see what you are saying there. But there are several steps you have to go through to test it in Opera 10.

Opera 10.10 > Working with the Floated Parent Version:

  1. Drag the bottom of your viewport up until there is only about 200px between the header and the footer. A scrollbar should appear on the fixed sidebar but it doesn’t.

  2. Reload the page while the viewport is minimized in height. Now the scrollbar appears on the fixed div.

  3. Now drag the viewport straight down from the bottom (just like a sticky footer test) and you will see that Opera 10 does not keep the bottom:50px positioning. It hangs where it was after the reload.

Opera 9.64 will pass that test as will FF3, Safari and IE8

For those who may have any interest, here is a stripped down test case that works directly off the body element.

There does not appear to be a CSS fix/workaround for this Opera 10 bug. :eye:

http://www.css-lab.com/bug-test/opera10-ap-bug.html

It seems to be related to Bug #25 on this [URL=“http://www.gtalbot.org/BrowserBugsSection/Opera10Bugs/”]Opera 10 Bug List but the conditions are not exactly the same.

Hi Ray,

Yes that’s an awkward bug.:slight_smile:

I thought the solutions we used in the sticky footer may help as it seemed to be a similar redraw problem but it didn’t work (or I didn’t find the right combination).

Probably best just to add a resize script for opera.

This is an old one that I had in place for a previous sticky footer and seems to wok for the fixed element also.


<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if opera resized
if (init==true)  {if (window.opera) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>


Hi Paul,
Yes I was also hoping the sticky footer trick would take care of it and I used it in both the examples from post#1.

I tried everything I could think of on that stripped down test case to no avail. It will keep the top:value; correct since that is never really changing.

I have used that script of yours several times and it looks like it is going to be the only way to hold things together in Opera 10. It’s probably the best safeguard right now in case the bug gets fixed in the next version.

I will cater to IE8 with the floated parent though. :slight_smile: