CODEWITHSUNDEEP
csssafaripositionabsolute
Andrej Denisov
Andrej Denisov

Reputation: 61

Broken position: absolute in safari

Here I am using position:absolute to put placeholder over editor fields. It works perfectly in Mozilla or Chrome, but gives really strange result in Safari. Text

You could see on screenshot, that inspector shows correct place for element, but the element itself positioned on wrong place. May be this is because it is inside foreingObject in svg. But how I could fix it in Safari?

Element's class:

.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;
}

Parent's class empty, element is just inline styled:

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

Grandparent's class (with position:relative)

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

} [1]: https://i.sstatic.net/zSSjY.png

Upvotes: 2

Views: 2746

Answers (1)

Andrej Denisov
Andrej Denisov

Reputation: 61

I found, that this is quite a common problem. Safari can't work with any position inside foreignobject.

So, for now, the only solution is to refactor to get rid of position inside foreingobjects.

Upvotes: 2

Related Questions