Show Floating Div on mouse over

Question

I have a simple configuration where I'm using a left panel, with a hover placeholders, when I hover a place holder (ex. links) I show a floating div in the right side

All is working just fine, except for Safari where the floating div is not shown.

See an example of the sources here jsfiddle

I've figured that the problem is coming because I gave the #left-panel an

overflow: auto;

but when I remove this rule, I can no longer see the content that is hidden from the #left-panel

Can anybody suggest anything?

EDIT

Just a note, it is working fine in the most versions of: Firefox, Chrome, Opera, the problem only in Safari (7)

Important

Even if I would enjoy using some plugins, for performance issues, I'm stick on using pure javascript code and css. any css rule to solve that is the solution I would go for

some screenshots - after hover:

Chrome

Firefox

Opera

Safari

Answer 1

Setting position:fixed to position:asbolute for #left-panel fixes the problem for me. Is it necessary to have a fixed position?

Answer 2

I would put this in a comment, but it would not let me add a comment. Try using absolute positioning and position the block entirely off the window; when the user mouses over, position the block to where you want it on the page. You can use CSS for this.

Here is a page on w3.org that shows how to do this for an accessibility issue: http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G201.