Странно на мобильном

Question

Я сделал экран с повернутым текстом: Экран в веб-браузере

Но текст не остается на своем месте, когда я просматриваю его на своем iPhone :( экран на мобильном телефоне

Это html Я использовал:

<h1 class="work-permits-zijkant"> WORK x PERMITS </h1>

И CSS:

.work-permits-zijkant {
    margin-top: -70px;
    margin-left: 26px;
    margin-bottom: 0px;
    margin-right: 0px;
    color: white;
    font-family: avenir;
    font-weight: normal;
    text-align: left;
    font-size: 60px;
    letter-spacing: 8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    z-index: auto;
    position: fixed;
}

Надеюсь, вы поможете мне. :)