破碎位置：Safari中的绝对位置

Question

这里我使用 position:absolute 将占位符放在编辑器字段上。 它在 Mozilla 或 Chrome 中完美运行，但在 Safari 中给出了非常奇怪的结果。

您可以在屏幕截图中看到，检查器显示元素的正确位置，但元素本身定位在错误的位置。 可能是因为它在 svg 中的foreingObject 内部。但是我如何在 Safari 中修复它？

元素的类：

.sst-editor__placeholder {
position: absolute;
color: #bfc8d0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
top: 0;
left: 0;
border: red solid 1px;
pointer-events: none;
}

父类为空，元素只是内联样式：

Style Attribute {
height: 60px;
max-width: 144px;
}

祖父母的班级（位置：相对）

.sst-editor__container {
display: grid;
grid-template-columns: 1fr auto 1fr;
position: relative;
}

} [1]：https://i.stack.imgur.com/zSSjY.png

Answer 1

我发现，这是一个相当普遍的问题。 Safari 无法处理外来物内的任何位置。

因此，目前，唯一的解决方案是重构以摆脱外部对象内部的位置。