Search code examples
htmlcsssafarisafari6

Safari 6.1 hides inner div, when outer div has position:fixed and overflow:auto

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.

Solution

  • 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?