Motion Effects iOS: corrigir efeitos do Elementor no iPhone

Tipo Page Builders

Nome do erro Motion Effects do Elementor parados no iOS EN: Elementor Motion Effects not working on iOS

Severidade Informativo

Descrição Os Motion Effects do Elementor não funcionam no iOS quando o efeito está desativado para o breakpoint mobile em Apply Effects On, quando o Safari do iPhone suspende o reposicionamento durante o scroll por inércia, ou quando background-attachment fixed é ignorado pelo iOS.

O que é Motion Effects do Elementor no iOS?

Os Motion Effects iOS do Elementor são os efeitos de movimento da aba Advanced -> Motion Effects aplicados a um elemento quando a página e aberta no Safari do iPhone ou iPad. O recurso reune os Scrolling Effects (Vertical Scroll, Horizontal Scroll, Transparency, Blur, Rotate, Scale) e os Mouse Effects (Mouse Track, 3D Tilt), além da opção Sticky que prende o elemento durante a rolagem. No desktop esses efeitos respondem ao scroll e ao mouse em tempo real.

No iOS o comportamento muda por limitacoes do Safari mobile. Cada efeito tem o controle Apply Effects On, que define em quais dispositivos ele roda, e por padrão um efeito pode ficar restrito a Desktop. Além disso, o Safari do iPhone não dispara eventos de scroll continuos durante a rolagem por inercia (momentum scrolling): ele congela o JavaScript até o dedo soltar e a página parar, o que faz o efeito parecer travado. Os Mouse Effects não tem equivalente em tela de toque e, por isso, não se manifestam no iOS.

Como identificar

O efeito de Vertical Scroll, Transparency ou Rotate funciona no desktop e no Android, mas fica completamente parado ao abrir a página no Safari do iPhone ou iPad.
O elemento marcado como Sticky não gruda no topo durante a rolagem no iOS, embora funcione no preview do editor.
O efeito so se atualiza aos solavancos: a posicao muda apenas quando o dedo solta a tela e a rolagem por inercia termina.
Os Mouse Effects (Mouse Track e 3D Tilt) nunca aparecem no iPhone, pois dependem de movimento do cursor que não existe em tela de toque.
Uma seção com imagem de fundo em parallax exibe a imagem estática no iOS, sem o deslocamento que aparece no desktop.

Antes de começar: Antes de alterar configurações de cache ou mexer em efeitos de páginas no ar, faça um backup do site ou teste primeiro em um ambiente de staging, para poder reverter sem afetar o que já esta publicado.

Como prevenir

Ao criar um efeito, defina o Apply Effects On para todos os dispositivos onde ele deve aparecer e teste em um iPhone real antes de publicar.
Prefira Scrolling Effects no próprio elemento a parallax de fundo com background-attachment fixed, que o Safari do iOS ignora.
Use efeitos de scroll discretos no mobile, lembrando que o Safari iOS so atualiza a posicao quando a rolagem por inercia termina.
Sempre exclua os scripts do Elementor das regras de combinar ou adiar JavaScript no plugin de cache para preservar a inicializacao dos Motion Effects.

Causa

O controle Apply Effects On do efeito esta configurado apenas para Desktop (ou Desktop e Tablet), entao o Scrolling Effect não roda no breakpoint Mobile que o iPhone usa por padrão.
O Safari do iOS suspende a execução de JavaScript durante o momentum scrolling: os eventos de scroll so disparam quando a rolagem por inercia termina, congelando os Scrolling Effects que dependem de atualização continua de posicao.
O efeito depende de background-attachment fixed para o parallax de fundo, propriedade que o Safari do iOS ignora por design, deixando a imagem de fundo estática no iPhone e iPad.
O efeito configurado e um Mouse Effect (Mouse Track ou 3D Tilt), que reage ao movimento do cursor e não tem equivalente em dispositivo de toque, logo nunca se manifesta no iOS.
Um plugin de cache ou otimização combinou ou adiou o JavaScript do frontend do Elementor, impedindo o script de Motion Effects de inicializar a tempo no Safari mobile.

Como resolver

Habilite o efeito para o dispositivo Mobile: Abra o elemento no editor, va em Advanced -> Motion Effects e localize o efeito aplicado. No controle Apply Effects On, marque também Mobile (e Tablet, se quiser cobrir o iPad em modo retrato). Sem o Mobile selecionado, o iPhone não executa o efeito.
```
Selecione o elemento -> aba Advanced -> Motion Effects
No efeito ativo, abra o controle 'Apply Effects On'
Marque Mobile (e Tablet) além de Desktop
```
Pré-visualize com o dispositivo Mobile real: No editor, use o seletor de Modo Responsivo no rodape e mude para Mobile antes de salvar, depois abra a página publicada num iPhone real. O preview do desktop não reproduz o comportamento de scroll do Safari iOS.
```
No rodape do editor, clique no icone Responsive Mode
Selecione Mobile e revise o efeito
Salve e abra a URL publicada no Safari de um iPhone
```
Troque parallax de fundo por efeito no elemento: Se o efeito desejado e um parallax de imagem de fundo, o Safari do iOS ignora background-attachment fixed e mantem a imagem estática. Use o Vertical Scroll do próprio elemento (ou uma coluna com a imagem) em vez de depender do fundo fixo.
```
Coloque a imagem em uma coluna ou widget Imagem, não como background fixo
Aplique Motion Effects -> Scrolling Effects -> Vertical Scroll no elemento
Confirme que Apply Effects On inclui Mobile
```
Aceite que Mouse Effects não rodam no toque: Mouse Track e 3D Tilt dependem do cursor e não tem como funcionar em tela de toque do iOS. Para iPhone, substitua por um Scrolling Effect equivalente, que reage ao scroll e não ao mouse.
```
Desative Mouse Effects para o elemento no mobile
Adicione um Scrolling Effect (ex.: Scale ou Transparency) no lugar
```
Exclua o JavaScript do Elementor da otimização: Se um plugin de cache combina, adia ou minifica o JS, o script de Motion Effects pode não inicializar no Safari. Limpe o cache e exclua os scripts do Elementor (frontend e webpack) das regras de otimização de JavaScript, depois recarregue a página no iPhone.
```
Limpe o cache do plugin (ex.: WP Rocket -> Limpar cache)
Em Otimizar arquivos JavaScript, exclua os handles do Elementor (elementor-frontend, elementor-frontend-modules)
Recarregue a página no Safari do iPhone após limpar o cache
```

CSS

/* O Safari do iOS ignora background-attachment: fixed.
   Em vez de depender do parallax de fundo, neutralize o fixed no mobile
   e deixe o Scrolling Effect do Elementor cuidar do movimento. */
@media (max-width: 767px) {
  .elementor-section.parallax-fundo {
    background-attachment: scroll !important;
    /* iOS renderiza o fundo fixo como estatico; scroll evita o salto */
  }
}

/* Garante que o container do Motion Effect possa transladar no toque */
@media (max-width: 767px) {
  .elementor-motion-effects-element {
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }
}

Perguntas frequentes

Por que os Motion Effects do Elementor não funcionam no meu iPhone

Na maioria dos casos o controle Apply Effects On do efeito esta restrito a Desktop, entao ele não roda no breakpoint Mobile que o iPhone usa. Abra o elemento em Advanced -> Motion Effects e marque também Mobile no Apply Effects On.

O efeito so se mexe quando solto o dedo da tela no iOS, e normal

Sim. O Safari do iPhone suspende o JavaScript durante a rolagem por inercia e so dispara os eventos de scroll quando a página para. Por isso Scrolling Effects que dependem de atualização continua parecem travar até o fim do movimento.

Por que o parallax de imagem de fundo fica estático no iPhone

O Safari do iOS ignora a propriedade background-attachment fixed, que muitos parallax de fundo usam. Em vez do fundo fixo, aplique um Scrolling Effect como Vertical Scroll diretamente no elemento ou coluna que contem a imagem.

Os Mouse Effects do Elementor funcionam no celular

Não. Mouse Track e 3D Tilt reagem ao movimento do cursor, que não existe em tela de toque. No iPhone substitua por um Scrolling Effect equivalente, que responde ao scroll em vez do mouse.

Como faço o Sticky do Elementor grudar no iPhone

Confirme que o Sticky e o efeito associado estão com Apply Effects On incluindo Mobile e que nenhum plugin de cache adiou o JavaScript do Elementor. Teste sempre na página publicada, no Safari de um iPhone real, e não apenas no preview do editor.

Plugin de cache pode quebrar os Motion Effects no Safari

Sim. Combinar, adiar ou minificar o JavaScript pode impedir o script de Motion Effects de inicializar no Safari. Exclua os handles do Elementor das regras de otimização de JS e limpe o cache antes de testar de novo no iPhone.

Preciso do Elementor Pro para usar Motion Effects

Sim. Os Motion Effects, incluindo Scrolling Effects, Mouse Effects e Sticky, fazem parte do Elementor Pro. A configuração Apply Effects On por dispositivo também fica disponível a partir da versão Pro.

Atenção

Como corrigir o erro de File Upload por permissões de pasta no ACF PRO

O erro de File Upload por permissões de pasta no ACF PRO acontece quando o campo File usa a media popup nativa do WordPress para enviar um arquivo, mas a pasta wp-content/uploads não tem permissão de escrita para o usuário do servidor web, e o upload falha antes de o arquivo ser anexado ao campo.

Atenção

Como corrigir o Maps Listing do JetEngine que não exibe marcadores no WordPress

O JetEngine não exibe marcadores no Maps Listing quando falta uma API key válida do provedor de mapas, quando o campo de endereço não tem coordenadas geocodificadas, ou quando a fonte de endereço do widget aponta para o campo errado. Sem latitude e longitude armazenadas, o mapa carrega mas nenhum pino é desenhado.

Atenção

Como corrigir a incompatibilidade do ACF PRO com o editor Gutenberg

A incompatibilidade do ACF PRO com o Gutenberg ocorre quando o plugin Gutenberg standalone, uma versão defasada do ACF ou um block.json mal registrado impedem que campos e ACF Blocks apareçam no editor de blocos.

Atenção

Como corrigir o Event Calendar que não sincroniza no Essential Addons

O Event Calendar do Essential Addons não sincroniza quando a fonte de eventos escolhida no widget esta mal configurada: chave de API ou ID do Google Calendar incorretos, calendário do Google não público, ou o plugin The Events Calendar ausente quando ele e a fonte selecionada.

Grave

Como corrigir Dynamic Tags do Elementor que não exibem dados do ACF

As Dynamic Tags do Elementor deixam de exibir dados do ACF quando o campo sai vazio no widget dinamico do editor. As causas reais são o Elementor Pro inativo (Dynamic Tags e recurso Pro), a regra de local do grupo ACF não casar com o post editado, ou o Image Field retornar Array em vez de Image URL.

Grave

Como corrigir o erro de licença ao ativar o Elementor Pro

O erro de licença do Elementor Pro impede a ativação dos recursos pagos quando a chave não conecta ao servidor da Elementor, o limite de sites do plano foi atingido ou a licença ainda consta ativa em outro domínio.

Setores

Extensões

Integrações

Como corrigir Motion Effects do Elementor que não funcionam no iOS

O que é Motion Effects do Elementor no iOS?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o erro de File Upload por permissões de pasta no ACF PRO

Como corrigir o Maps Listing do JetEngine que não exibe marcadores no WordPress

Como corrigir a incompatibilidade do ACF PRO com o editor Gutenberg

Como corrigir o Event Calendar que não sincroniza no Essential Addons

Como corrigir Dynamic Tags do Elementor que não exibem dados do ACF

Como corrigir o erro de licença ao ativar o Elementor Pro

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos