0

Safari seems to have changed their rendering of child objects outside their parents, in certain situations.

Setup:

  • A parent (#outer) div with position:fixed and overflow:auto
  • A child (#inner) div with position:fixed and positioned above or below parent

Example: http://jsfiddle.net/2tp9R/

I have only been able to reproduce this in safari 6.1. Firefox, Chrome and IE renders the child as safari used to do.

Question: How can this be worked around?

P.S. Jeopardy!-ish question.

Community
  • 1
  • 1
zpon
  • 1,482
  • 1
  • 15
  • 21

1 Answers1

0

Workaround

If overflow:auto is removed or fixed is changed to absolute the child is showed.

Example: http://jsfiddle.net/5kfbe/

This may not solve the problem in all situations though, e.g. when you need overflow:auto and position:fixed to be set on your parent div. Anyone got a better solution?

zpon
  • 1,482
  • 1
  • 15
  • 21