html – Div element misplaced on iOS

I have an issue with positioning (see attached photos). Everything works fine on all devices and systems apart from iOS. I have read many different threads on this forum but couldn’t find what I’m looking for.

.bracket {
    position: relative;
}
.backline-romb{
    transform: rotate(45deg);
    height: 6px;
    width: 6px;
    background-color: grey;
    position: absolute;
    left:-10px;
    top:1px;
}
.backline-connector{
    border-top: 2px solid grey;
    position: absolute;
    left:-28px;
    top:3px;
    width: 23px;
}
.romb{
    transform: rotate(45deg);
    height: 6px;
    width: 6px;
    background-color: rgb(128, 128, 128);
    position: absolute;
    right:-12px;
    top:1px;
}
.line-connector{
    border-top: 2px solid grey;
    border-right: 2px solid grey;
    position: absolute;
    width: 22px;
    height: 50px;
    right:-32px;
    top:3px
}

This is how it looks like on Windows