Safari中的元素定位和css转换问题

Question

我有一个弹出窗口，我应用这些属性：

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

虽然这在Chrome上完美运行，但我在Safari上遇到了一个奇怪的问题。基本上，一旦弹出窗口改变大小，元素的rendering/graphics就会远离其实际位置。这张照片可能有助于更好地理解这种奇怪的行为。

因此弹出窗口完全居中，以及它的所有子元素，但渲染/图形以某种方式被翻译。例如，如果我想点击X关闭弹出窗口，我必须点击＆＃34;假设＆＃34;位置（图中以蓝色突出显示的位置）而不是＆＃34;可见/渲染＆＃34;之一。

这个问题有解决方法吗？

Answer 1

您可以在<center></center>中设置内容或添加如下属性： div.popup.project.dark{ text-align: center; }