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

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.

Erros relacionados

- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)
- [Como corrigir Elementor com widgets que não aparecem](https://full.services/wp-fixer/corrigir-elementor-widgets-nao-aparecem/)
- [Como corrigir conflito entre Elementor e tema WordPress](https://full.services/wp-fixer/corrigir-conflito-elementor-tema/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

```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.

**Fonte:** [Elementor — Motion Effects (Central de Ajuda)](https://elementor.com/help/motion-effects/)