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 关闭弹出窗口，我必须点击“假定”位置（图中以蓝色突出显示的位置）而不是“可见/渲染”位置。

这个问题有解决办法吗？

Answer 1

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