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; } div.popup.project.dark{ text-align: center; }