-webkit-transform e a eterna batalha com o iPhone

Desde Dezembro estou ajudando a Bru a desenvolver um novo negócio, o Dicaria, um site de avaliação de produtos. Em breve colocarei mais informações, mas agora vou leventar outros problemas e compartilhar um pouco do sofrimente que tive com o desenvolvimento para mobile, exclusivamente para iPhone utilizando o navegador Safari. Especificamente na parte de CSS e animação, demorei para descobrir porque o site abria em todos os navegadores, exceto no Safari e somente para iPhone (nos iPads funcionavam normalmente).

Como não tenho nenhum aparelho iChatinho, tive que utilizar o BrowserStack para conseguir fazer os teste, junto com o JSFiddle. Depois de vários teste, e algumas boas horas de stress, descobri que o problema está na falta de capacidade do aparelho em processar algumas poucas animações (no caso estava animando o tamanho da fonte + posição + rotação). Fiz pensando em minimizar ao máximo os recursos, usando css que é mais leve, mas também deixando uma boa usabilidade. Mas é incrível como a maçã mordida atrapalha a nossa vida (como se já não bastasse o Internet Explorer).

O que tive que fazer foi trocar meus keyframes que usavam mais ou menos o seguinte padrão:

-webkit-transform: rotate(180deg);
font-size: 0em;
left: 26px;
top: 29px;

para animar apenas a rotação e transparência (o que tira um pouco o tchans da trasnformação, mas pelo menos resolveu o problema).

-webkit-transform: rotate(180deg);
opacity: 0;

Em resumo, evitem muitas animações com keyframes no iPhone, já que ele tem muitas limitações nesse sentido e evitem maiores dores de cabeça como as que eu tive.

Abraços,
Gui Mori

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *