Results 1 to 7 of 7
Thread: IE8 & Opera Fixed Position Bug
Feb 2, 2010, 13:05 #1
IE8 & Opera Fixed Position Bug
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.
Feb 2, 2010, 17:45 #2
- Join Date
- Oct 2008
- Whiteford, Maryland, United States
- 6 Post(s)
- 0 Thread(s)
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"> <div style="overflow-y:auto;position:absolute;"> <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> </div> </div> </div>Always looking for web design/development work. Willing to do it cheap to build portfolio!
Feb 2, 2010, 22:04 #3
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.
Feb 2, 2010, 22:46 #4It doesn't seem to like the overflow on a fixed element.
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
Feb 3, 2010, 20:07 #5
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.
It seems to be related to Bug #25 on this Opera 10 Bug List but the conditions are not exactly the same.
Feb 4, 2010, 02:47 #6
- Join Date
- Jan 2003
- Hampshire UK
- 179 Post(s)
- 6 Thread(s)
Yes that's an awkward bug.
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.
Feb 4, 2010, 17:33 #7
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.