Safari - position:fixed doesn't breaks element from scope

Question

I found a weird Safari behavior related to positioning.

For example:

#parent {
  position:fixed;
  overflow-x: hidden;
  height:30px;
}
#toolTip-child {
  position:fixed
  display:block;
  top:10px;
  left:16px;
  height:100px;
}

As far as I know, when position is set to fixed (or absolute, doesn't matter in that case), the element should be broken from the scope and render somehow independently.

It works as I mentioned above in every browser we use to tests the site we develop, beside of Safari.

In Safari, if parent element is fixed positioned and overflow-x property. is added, no matter how I position the child element (position:fixed, top, left -> doesn't matter), if it overflow the parent element, it's not visible.

I hitted the wall and have no idea how to force Safari to cooperate.

If anyone of you have any idea, it would be appreciated.

Answer 1

Well, this is not actually an answer, because it seems like a bug, but I have a workaround.

The problem is that when we apply overflow-x:hidden to an element, in Safari it also gets overflow-y:hidden. I don't know why, but it seems to be an ordinary bug.

Workaround I figured out is quite simple.

The child element toggling from hidden to visible state after click on the trigger. I simply added two lines. One resizes the parent element in y dimension. Second resizes it back when the child element hides.

Not the best solution, but is enough for me.