css - 破碎位置：野生动物园中的绝对位置

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

标签： csssafaripositionabsolute

Answer 1

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

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