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
