Consider the following example : https://codepen.io/anon/pen/OOrMLm
Each white block can be clicked, which reveals a small red popup in which I need the users to make some choices.
On Firefox, everything seems to work fine (if I use display:inline-block; on the white elements), but on Chrome and Safari the behaviors are kinda weird.
The two bugs are the following :
- displaying the red popups in
position:absolutethat are located on the right hand side seems to affect the flow in the columns (the blue blocks expand), while it does not in Firefox (which is what I want) - clicking inside a red popup that is overlapping onto the 2nd blue div will not be caught as a click inside the popup (it seems like the popup is "below" the 2nd blue div somehow).
I played around with forcing the z-index and transform: translateZ() but with no luck. It seems like display: flow-root; helps a bit on Chrome, but I could not get it to work fully.
Any idea on how to fix this in Chrome and Safari ?
