CSS column-count and position absolute (z-index?) in Chrome and Safari

Question

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:absolute that 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 ?

Answer 1

Cool that transform: translateY(0) can get it out of the wrapping to some extent.

You can set the height of the container before showing the popup. That seems to help in this very specific case, though the way Safari (and to some extent also Chrome) handles columns is difficult.

Try this:

const wrappers = document.querySelectorAll(".main_wrap");

wrappers.forEach(wrapper => {  
  wrapper.style.height = wrapper.offsetHeight + "px";
});

// to make sure there is space for the popup on the page:
const lastWrapper = wrappers[wrappers.length - 1];
lastWrapper.parentNode.style.marginBottom = "200px";