This is a demo of a rendering bug in Safari. For whatever reason, Safari clips out-of-bounds "position: fixed/absolute;" child objects (colored in red) under three conditions.

  1. The parent object (colored blue) is "position: fixed;".
  2. The parent object (colored blue) has "overflow: auto;" set.
  3. The parent object contains enough content to make the scroll bar appear.

The "content" in this case is simulated by a tall green rectangle that can be removed by pressing the button below. (Refresh to reset the demo).