1

In Safari, when a parent element has overflow-y set to auto, it treats overflow-x as scroll or visible when a child element has a position fixed. Is there a work around for this? Please see this jsFiddle

.flyout{
    position: fixed;
    //this doesnt display
}

.parent{
    overflow-y: auto
}

The flyout element is not visible in safari, while it is still visible in chrome, and firefox

chopper
  • 6,649
  • 7
  • 36
  • 53
elliott sencan
  • 11
  • 2
  • 1
    So, I understand your question but I have to ask: Why are you using position: fixed in this case? Position: fixed is intended to be used to position an element relative to the viewport (window). If this is the case, why would it matter that it is a child of anything? If you intend to use position: fixed, take it out of the container. If you want to position it relative to the container, use position: absolute instead. – Joshua Whitley Oct 03 '14 at 18:09
  • Just a note that you may have to change your design if you're attempting what I think you're attempting due to a quirk with overflow in the W3C spec. See: http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue – Joshua Whitley Oct 03 '14 at 18:20
  • I'm seeing this same issue, and it really becomes a problem when attempting to add/remove fixed position based on breakpoints in responsive for mobile. – Jason Mar 06 '15 at 02:21

1 Answers1

0

http://jsfiddle.net/magicdawn/vt1cweyx/10/

  • remove overflow related from wrapper
  • add height & overflow-y to a direct child

Since overflow-x: visible and overflow-y: scroll behaves strange in safari, so we split them to 2 elements.

  • the top wrapper .parent handles overflow-x: visible
  • inner element .menu handles overflow-y: scroll
magicdawn
  • 27
  • 3