ejemplos - Transformar no funciona en iOS

transform translatey

Question

Así que me enfrento a este pequeño problema para implementar este código en iOS porque no estoy familiarizado con el funcionamiento de iOS. Tengo este círculo que estoy usando en mi sitio web y funciona perfectamente en navegadores y dispositivos Android, pero cuando se trata de iOS, se descompone y todos los títulos vienen al centro. Me alegraría si alguien pudiera ayudarme en esto ...

El HTML

<div class=''circle-container''>   
    <div class="center"> Center </div>
    <div class="deg90">1</div>
    <div class="deg315">2</div>
    <div class="deg0">3</div>
    <div class="deg110">4</div>
    <div class="deg135">5</div>
    <div class="deg180">6</div>
    <div class="deg225">7</div>
</div>

El CSS:

.circle-container {
    position: relative;
    width: 15em;
    height: 14em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 0px;
    border-radius: 50%;

}
.circle-container > a {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;

    text-align: center;
}

.circle-container div {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;
    text-align: center;
}
.circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;}
.deg0 { transform: translate(5.2em); } /* 12em = half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(5.4em) rotate(-45deg); }
.deg90 { transform: rotate(-90deg) translate(5em) rotate(90deg); }
.deg110 { transform: rotate(45deg) translate(5em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(5em) rotate(-135deg); }
.deg180 { transform: translate(-5em); }
.deg225 { transform: rotate(225deg) translate(5em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(5em) rotate(-315deg); }

Gracias ..

Answer 1

Encontré el problema, era una tontería. No utilicé -webkit, que es compatible con iOS . A continuación se muestra el JS Fiddle resuelto si alguien lo necesita.

.circle-container {
    position: relative;
    width: 15em;
    height: 14em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 0px;
    border-radius: 50%;

}
.circle-container > a {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;

    text-align: center;
}

.circle-container div {
    display: block;
    text-decoration: none;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;
    text-align: center;
}
.circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;}
.deg0 { 
    transform: translate(5.2em); 
    -webkit-transform: translate(5.2em); 
    -ms-transform:  translate(5.2em);
} /* 12em = half the width of the wrapper */
.deg45 { 
    transform: rotate(45deg) translate(5.4em) rotate(-45deg);
    -webkit-transform: rotate(45deg) translate(5.4em) rotate(-45deg);
    -ms-transform: rotate(45deg) translate(5.4em) rotate(-45deg); 
}
.deg90 { 
    transform: rotate(-90deg) translate(5em) rotate(90deg);
    -webkit-transform: rotate(-90deg) translate(5em) rotate(90deg);
    -ms-transform: rotate(-90deg) translate(5em) rotate(90deg);
}
.deg110 { 
    transform: rotate(45deg) translate(5em) rotate(-45deg);
    -webkit-transform: rotate(45deg) translate(5em) rotate(-45deg);
    -ms-transform: rotate(45deg) translate(5em) rotate(-45deg);
 }
.deg135 {
    transform: rotate(135deg) translate(5em) rotate(-135deg);
    -webkit-transform: rotate(135deg) translate(5em) rotate(-135deg);
    -ms-transform: rotate(135deg) translate(5em) rotate(-135deg); 
}
.deg180 { 
    transform: translate(-5em); 
    -webkit-transform: translate(-5em);
    -ms-transform: translate(-5em); 
}
.deg225 { 
    transform: rotate(225deg) translate(5em) rotate(-225deg);
   -webkit-transform: rotate(225deg) translate(5em) rotate(-225deg);
   -ms-transform: rotate(225deg) translate(5em) rotate(-225deg); 
}
.deg315 { 
    transform: rotate(315deg) translate(5em) rotate(-315deg);
    -webkit-transform: rotate(315deg) translate(5em) rotate(-315deg);
    -ms-transform: rotate(315deg) translate(5em) rotate(-315deg);
}

Answer 2

Otro problema posible aquí (cuando iOS parece estar ignorando una transformación) es un error en algunas versiones de iOS donde se ignoran las rotaciones que son un múltiplo exacto de 90 grados.

La solución que funcionó para mí fue utilizar una transformación de 89.9 grados (89.9 grados funcionó como se esperaba; 90 grados no produjeron ninguna rotación). No ideal, pero en mi caso la diferencia no se notaba.

Answer 3

iOS safari todavía requiere prefijos de navegador para la transform

Duplique todas sus transformaciones y agregue una versión con prefijo -webkit- antes

Ejemplo

.deg0 { 
    -webkit-transform: translate(5.2em);
    transform: translate(5.2em);
}

Demo de trabajo