Issue with element positioning and css translation in Safari

Question

I have a popup to which I apply these properties:

position: absolute;
top: 50%;
left: 50%;
width: 80%;
max-width: 700px;
height: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

While this works perfectly on Chrome, I get a strange issue on Safari. Basically as soon as the popup changes size the rendering/graphics of the element move away from its real position. Here's a photo that might help understand better this weird behaviour.

So the popup is perfectly centered, as well as all its child elements, but the render/graphics are somehow translated. For instance, if I want to click on the X to close the popup I have to click on the "supposed" position (the one highlighted in blue in the picture) and not the "visible/rendered" one.

Is there any solution to this issue?

Answer 1

You can set content in a <center></center> or add attribute like this: div.popup.project.dark{ text-align: center; } div.popup.project.dark{ text-align: center; }