Brad Bansner
asked on
Position Fixed in CSS on website not rendering consistently in specific version of Safari
I am having difficulty getting a website to render consistently in Safari 6.1.6, which is what my client has. I have Safari 6.2.5.
On this website:
http://shoperenowharton.com
...the large background images do not scroll. This is accomplished by setting the parent DIV "homebg" with position:fixed, top:0, left:0. In Safari 6.1.6, the background image stays fixed, as I want it to.
On this website:
http://bam.bbdesign.com
...its exactly the same technique, DIV "bgmain" has position:fixed, top:0, left:0. However, in Safari 6.1.6, the background images are scrolling upward along with the rest of the page content, i.e. NOT staying fixed.
I understand different browsers support different CSS, but position:fixed has been around for a long time. I have also not been able to duplicate this problem in any other browser. Is there something in my CSS for these two sites that is different enough to cause the problem?
Would appreciate another set of eyes on this, or any advice. Most specifically, I just want to know why Safari 6.1.6 is scrolling my DIV which I have styled with position:fixed.
Thank you!
On this website:
http://shoperenowharton.com
...the large background images do not scroll. This is accomplished by setting the parent DIV "homebg" with position:fixed, top:0, left:0. In Safari 6.1.6, the background image stays fixed, as I want it to.
On this website:
http://bam.bbdesign.com
...its exactly the same technique, DIV "bgmain" has position:fixed, top:0, left:0. However, in Safari 6.1.6, the background images are scrolling upward along with the rest of the page content, i.e. NOT staying fixed.
I understand different browsers support different CSS, but position:fixed has been around for a long time. I have also not been able to duplicate this problem in any other browser. Is there something in my CSS for these two sites that is different enough to cause the problem?
Would appreciate another set of eyes on this, or any advice. Most specifically, I just want to know why Safari 6.1.6 is scrolling my DIV which I have styled with position:fixed.
Thank you!
gheist
Lion and Safari 6.1.6 are EOL, you should test with 7.2.5 and up only (especially when upgrade to yosemite is free)
ASKER
Understandable. Its tough when these old browsers are floating around out there. And my client in this case is a design agency, it is difficult to convince them that the problem is with their computers.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The most significant difference I see if that the <img> elements are each wrapped in their own <div> and yet both are absolutely positioned. Try replacing "position:absolute" with "display:block" in "#bgmain div.bgmainwrap img".
Designers are just like other clients except they tend to under-appreciate the differences between web design and print design.
Designers are just like other clients except they tend to under-appreciate the differences between web design and print design.
But you cannot make CSS render in NCSA Mosaic browser...