Elementor hover effects não funcionam no Safari: corrigir

Tipo Page Builders

Nome do erro Efeitos de hover do Elementor não funcionam no Safari EN: Elementor hover effects not working in Safari

Severidade Informativo

Descrição 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.

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

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

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

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

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

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

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

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.

Atenção

Como corrigir o Google Maps Field no ACF PRO (chave de API)

O Google Maps Field do ACF PRO exige uma chave de API do Google registrada via filtro acf/fields/google_map/api ou acf_update_setting. Sem ela, o campo mostra um mapa cinza e o console acusa erro da Google Maps JavaScript API.

Atenção

Como corrigir ícones do Font Awesome que não aparecem no Elementor

Ícones do Font Awesome somem no Elementor quando a biblioteca de ícones não é carregada no frontend, quando a classe usada é do Font Awesome 4 sem o suporte ativo, ou quando o CSS de ícones está em cache desatualizado.

Informativo

Como corrigir o layout responsivo do widget Card no Happy Addons

O layout responsivo do widget Card do Happy Addons quebra quando a largura da coluna, o tamanho da imagem ou o alinhamento do texto não são ajustados por dispositivo no Elementor, fazendo o card desalinhar, estourar a imagem ou perder a altura igual no celular e no tablet.

Atenção

Como corrigir erros de compilacao de CSS com vários page builders no WordPress

O erro de CSS com vários page builders no WordPress ocorre quando Elementor e outro construtor (como o Astra Pro) geram folhas de estilo separadas que se sobrepoem ou ficam em cache desatualizado, fazendo o layout da página renderizar sem os estilos corretos.

Grave

Como corrigir o Listing Grid vazio no JetEngine

O Listing Grid vazio no JetEngine ocorre quando a query (Post Status, Meta Query, Tax Query, Offset ou Cache Query) não retorna nenhum item para o Listing template. Corrige-se alinhando os parametros do Query Builder a dados que existem no site.

Atenção

Como corrigir a falha de upload de arquivos no JetFormBuilder

A falha de upload no JetFormBuilder acontece quando o campo Media Field rejeita o arquivo por exceder o limite de tamanho ou de quantidade, por não casar com o ALLOW MIME TYPES configurado, ou por o usuário não ter o nível de USER ACCESS exigido para enviar.

Setores

Extensões

Integrações

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

O que é hover effects do Elementor no Safari?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o Google Maps Field no ACF PRO (chave de API)

Como corrigir ícones do Font Awesome que não aparecem no Elementor

Como corrigir o layout responsivo do widget Card no Happy Addons

Como corrigir erros de compilacao de CSS com vários page builders no WordPress

Como corrigir o Listing Grid vazio no JetEngine

Como corrigir a falha de upload de arquivos no JetFormBuilder

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