# Como corrigir hover effects do Elementor que não funcionam no Safari

Os hover effects do Elementor não funcionam no Safari quando o navegador serve um arquivo CSS desatualizado, quando a transição depende de uma propriedade que o WebKit exige com prefixo -webkit-, ou quando o efeito é acionado por :hover em um iPhone, onde não existe ponteiro de mouse.

## O que é hover effects do Elementor no Safari?

Os hover effects do Elementor são animações aplicadas quando o ponteiro do mouse passa sobre um elemento: mudança de cor de fundo, escala ou rotação da imagem, deslocamento do botão e transições suaves de cor. No editor, eles ficam na aba Estilo (estado Hover) e nas Hover Animations dentro de Avançado. Por baixo, o Elementor gera regras CSS que combinam a pseudoclasse :hover com transition e transform para animar o estado.

O problema aparece quando esses efeitos funcionam no Chrome e no Firefox, mas o Safari (no Mac e no iPhone) ignora a animação ou aplica o estado final sem transição. O Safari usa o motor WebKit, que é mais rígido com prefixos de fornecedor e com o cache de arquivos CSS, e no iOS o :hover tem comportamento próprio porque a tela é sensível ao toque, não há cursor passando sobre o elemento.

## Como identificar

- O hover muda a aparência do elemento no Chrome e no Firefox, mas no Safari o estado de hover não acontece ou aparece sem a transição suave, de forma instantânea.
- No iPhone ou iPad o efeito de hover só dispara depois do primeiro toque no elemento e fica preso no estado final até tocar fora dele.
- Botões e imagens com efeito de hover piscam, tremem ou mostram bordas serrilhadas durante a animação apenas no Safari.
- Um efeito de vidro fosco (blur de fundo) configurado no hover não aplica nenhum desfoque no Safari, enquanto funciona nos outros navegadores.
- No Console do Safari (Develop -> Show JavaScript Console) não há erro de hover, mas o inspetor mostra a regra de transition do Elementor cortada ou ignorada no elemento.

**Antes de começar:** Antes de mudar o CSS Print Method, regenerar arquivos ou editar CSS do tema em produção, faça um backup completo do site (arquivos e banco de dados) ou aplique primeiro em um ambiente de staging, para reverter caso o layout de outras páginas seja afetado.

## Como prevenir

- Sempre que criar ou alterar um efeito de hover, regenere os arquivos do Elementor e faça purge do cache e da CDN antes de validar no Safari, para nunca testar contra um CSS antigo.
- Teste cada efeito de hover no Safari do Mac e em um iPhone real desde o início, já que o WebKit e o toque do iOS se comportam diferente do Chrome no desktop.
- Prefira as Hover Animations nativas do Elementor a regras :hover manuais, porque elas já consideram o comportamento de toque e os prefixos de fornecedor.
- Ao escrever CSS próprio para hover, inclua os prefixos -webkit- de transform e backdrop-filter e condicione efeitos de mouse a @media (hover: hover) para não travar em telas de toque.

Erros relacionados

- [Como corrigir Motion Effects do Elementor que não funcionam no iOS](https://full.services/wp-fixer/corrigir-motion-effects-ios-elementor/)
- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)
- [Como corrigir conflitos entre o Elementor e plugins de cache](https://full.services/wp-fixer/corrigir-conflito-elementor-cache/)

## Causa

- O Safari está servindo um arquivo CSS antigo do Elementor: com o CSS Print Method em External File, o Safari guarda o .css em cache de forma agressiva e continua usando a versão sem o efeito de hover até o arquivo ser regenerado.
- A transição do hover usa uma propriedade que o WebKit do Safari exige com o prefixo -webkit-, como transform ou backdrop-filter; sem o prefixo -webkit-backdrop-filter o desfoque de fundo no hover simplesmente não renderiza no Safari.
- O efeito depende de :hover puro e está sendo aberto em iOS Safari, onde não existe ponteiro de mouse: o primeiro toque ativa o hover e ele permanece travado, em vez de animar a entrada e a saída como no desktop.
- Uma transição com all e transform sem aceleração de composição faz o Safari renderizar a animação na CPU, gerando o tremor e o serrilhado que não aparecem no Chrome.
- Um plugin de cache ou a CDN está entregando uma versão minificada e combinada do CSS gerada antes de você criar o efeito de hover, então o Safari recebe o arquivo errado mesmo após salvar a página no Elementor.

## Como resolver

1. Regenere o CSS do Elementor e limpe os caches: A causa mais comum é o Safari usando um arquivo CSS antigo. Regenere os arquivos do Elementor, limpe o cache do plugin de cache e da CDN, e force o Safari a baixar o CSS novo recarregando sem cache.

```
Painel WP -> Elementor -> Ferramentas -> aba Geral -> botão Regenerar Arquivos e Dados (Regenerate Files & Data)
Limpe o cache do seu plugin de cache e faça purge da CDN (ex.: Cloudflare -> Purge Everything)
No Safari: menu Develop -> Empty Caches, depois recarregue a página com Cmd+Option+R
```

2. Troque o CSS Print Method para Internal Embedding ao depurar: Em External File, o Safari mantém o .css em cache por muito tempo. Mudar para Internal Embedding faz o Elementor injetar o CSS direto no HTML da página, eliminando o cache de arquivo e revelando se o hover quebrado era só o arquivo antigo.

```
Painel WP -> Elementor -> Configurações -> aba Avançado
Em CSS Print Method selecione Internal Embedding
Salve, recarregue no Safari e verifique se o hover voltou; se voltou, o problema era cache de arquivo
```

3. Reproduza o hover no Web Inspector do Safari: Use o inspetor do Safari para forçar o estado :hover e ver se a regra de transition do Elementor está chegando ao elemento. Se a regra aparece cortada ou riscada, é propriedade não suportada ou prefixo faltando.

```
Safari -> menu Develop -> Show Web Inspector (ative Develop em Preferências -> Advanced)
Selecione o elemento -> painel Styles -> botão :hov -> marque :hover para travar o estado
Confira se a regra transition e transform do Elementor está aplicada e não riscada
```

4. Adicione os prefixos -webkit- que o Safari exige: Se o efeito usa desfoque de fundo (glassmorphism) ou transform e some no Safari, falta o prefixo de fornecedor. Adicione a versão -webkit- da propriedade no CSS customizado do tema filho ou no campo CSS Personalizado do Elementor PRO.

```
Painel WP -> Aparência -> Editor de tema (tema filho) ou Elementor PRO -> aba Avançado -> CSS Personalizado do elemento
Para o efeito de vidro fosco, declare -webkit-backdrop-filter antes de backdrop-filter
Para escala e rotação, declare -webkit-transform junto de transform na regra :hover
```

5. Trate o hover no iPhone e iPad (toque): No iOS o :hover não anima como no desktop porque a tela é por toque. Em vez de depender só de hover, envolva o efeito em uma media query de ponteiro fino ou use uma Hover Animation do Elementor, que já trata o toque.

```
Prefira as Hover Animations nativas do Elementor (aba Avançado do elemento) em vez de :hover puro no CSS
Para CSS próprio, condicione o efeito a dispositivos com mouse usando @media (hover: hover) and (pointer: fine)
Teste no iPhone real ou no simulador, pois o Safari desktop não reproduz o comportamento de toque
```

6. Estabilize a animação para remover tremor e serrilhado: Se o hover funciona mas pisca ou serrilha só no Safari, force a aceleração de composição com uma transformação 3D mínima e evite transition: all, animando apenas as propriedades necessárias.

```
No CSS Personalizado do elemento, adicione transform: translateZ(0) ao estado base
Troque transition: all por transition de propriedades específicas (ex.: transform, background-color)
Recarregue no Safari sem cache e confirme que o tremor desapareceu
```


## Código

```css
/* CSS custom no Elementor PRO (Avançado -> CSS Personalizado) ou tema filho */
/* selector = o próprio elemento no Elementor PRO; troque por sua classe no tema filho */

selector {
    /* força aceleração de composição no Safari para remover tremor/serrilhado */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* anime só o necessário, nunca transition: all */
    -webkit-transition: -webkit-transform .3s ease, background-color .3s ease, -webkit-backdrop-filter .3s ease;
    transition: transform .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}

/* efeito de hover só em dispositivos com mouse (evita travar no iPhone) */
@media (hover: hover) and (pointer: fine) {
    selector:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        /* desfoque de fundo exige o prefixo -webkit- no Safari */
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}
```

## Perguntas frequentes

### Por que o hover do Elementor funciona no Chrome mas não no Safari

Quase sempre o Safari está usando um arquivo CSS antigo guardado em cache ou a transição depende de uma propriedade que o WebKit exige com prefixo -webkit-. Regenere os arquivos do Elementor, limpe os caches e confira no inspetor se a regra de hover chega ao elemento.

### Como faço o efeito de hover aparecer no iPhone

No iOS não existe ponteiro de mouse, então o :hover puro fica travado após o primeiro toque. Use as Hover Animations nativas do Elementor ou condicione o efeito a dispositivos com mouse usando @media (hover: hover) and (pointer: fine), assim ele não atrapalha no toque.

### Trocar o CSS Print Method para Internal Embedding resolve o hover no Safari

Ajuda a diagnosticar. Em Internal Embedding o Elementor injeta o CSS no HTML da página e o Safari deixa de servir um arquivo .css em cache. Se o hover volta com essa opção, a causa era cache de arquivo; depois você pode voltar para External File após limpar os caches.

### Por que meu efeito de vidro fosco no hover some só no Safari

O desfoque de fundo usa backdrop-filter, que o Safari só renderiza com o prefixo -webkit-backdrop-filter. Declare -webkit-backdrop-filter antes de backdrop-filter na regra de hover, no CSS personalizado do elemento ou do tema filho.

### O hover anima mas treme e fica serrilhado no Safari, como resolver

O Safari está renderizando a animação sem aceleração de composição. Adicione transform: translateZ(0) ao estado base do elemento e evite transition: all, animando apenas as propriedades necessárias como transform e background-color.

### Onde regenero o CSS do Elementor

Vá em Elementor, Ferramentas, aba Geral e clique em Regenerar Arquivos e Dados. Isso reconstrói os arquivos CSS de cada página; em seguida limpe o cache do plugin de cache e faça purge da CDN para o Safari baixar a versão nova.

### Um plugin de cache pode estar quebrando o hover no Safari

Sim. Plugins de cache e CDN podem entregar uma versão combinada e minificada do CSS gerada antes de você criar o efeito. Faça purge total do cache e da CDN após salvar a página e revalide no Safari sem cache.

### Como inspeciono o estado de hover dentro do Safari

Ative o menu Develop em Preferências, Advanced, abra o Web Inspector, selecione o elemento, clique no botão :hov no painel Styles e marque :hover. O estado fica travado para você ver se a regra de transition do Elementor está aplicada ou riscada.

**Fonte:** [MDN Web Docs — backdrop-filter (compatibilidade Safari e prefixo -webkit-)](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)