Safari - position: fixed does not break an element out of scope

Question

I discovered Safari's weird positioning behavior.

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 the position is set as fixed (or absolute, in this case it does not matter), the element must be broken out of scope and visualized somehow independently.

It works, as I mentioned above, in every browser that we use to test the site we are developing, in addition to Safari.

In Safari, if the parent is fixed and overflow-x . is added no matter how I place the child ( position:fixed , top , left → it doesn't matter), if it overflows the parent, it is not displayed.

I clicked on a wall and have no idea how to get Safari to work together.

If any of you have any ideas, this will be appreciated.

Answer 1

Well, actually this is not the answer, because it seems like an error, 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 a common mistake.

The workaround that I realized is pretty simple.

After clicking on the trigger, the child element switches from hidden to visible . I just added two lines. One resizes the parent to size y. The second resizes when the child is hidden.

Not the best solution, but enough for me.