Eu tenho uma situação em que, em circunstâncias normais de CSS, uma div fixa seria posicionada exatamente onde é especificada ( top:0px
, left:0px
).
Isso não parece ser respeitado se eu tiver um pai que tenha uma conversão translate3d. Não estou vendo alguma coisa? Eu tentei outras opções de transformação e estilo de transformação do webkit, mas não tive sorte.
Anexei um JSFiddle com um exemplo em que eu esperava que a caixa amarela estivesse no canto superior da página e não dentro do elemento do contêiner.
Você pode encontrar abaixo uma versão simplificada do violino:
#outer {
position:relative;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 300px;
border: 1px solid #5511FF;
padding: 10px;
background: rgba(100,180,250, .8);
width: 80%;
}
#middle{
position:relative;
border: 1px dotted #445511;
height: 300px;
padding: 5px;
background: rgba(250,10,255, .6);
}
#inner {
position: fixed;
top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px;
left: 0px;
background: rgba(200,180,80, .8);
margin: 5px;
padding: 5px;
}
<div id="container">
Blue: Outer, <br>
Purple: Middle<br>
Yellow: Inner<br>
<div id="outer">
<div id="middle">
<div id="inner">
Inner block
</div>
</div>
</div>
</div>
Como posso fazer o translate3d funcionar com crianças de posição fixa?
html
css
css-position
css-transforms
Juan Carlos Moreno
fonte
fonte
Respostas:
Isso ocorre porque ele
transform
cria um novo sistema de coordenadas local, conforme a especificação do W3C :Isso significa que o posicionamento fixo fica fixo no elemento transformado, e não na viewport.
Atualmente, não há uma solução alternativa que eu saiba.
Também está documentado no artigo de Eric Meyer: Desinstalando elementos fixos com transformações CSS .
fonte
Tive uma cintilação na minha navegação superior fixa quando os itens da página estavam usando transformação, o seguinte aplicado à minha navegação superior resolveu o problema de salto / cintilação:
Graças a esta resposta no SO
fonte
Como Bradoergo sugeriu, basta pegar a janela
scrollTop
e adicioná-la ao topo da posição absoluta, como:Isso funcionou para mim de qualquer maneira.
fonte
No Firefox e Safari, você pode usar em
position: sticky;
vez de,position: fixed;
mas não funcionará em outros navegadores. Para isso você precisa de javascript.fonte
position:fixed
e funcionaria como esperado de qualquer maneira.sticky
enquanto ele já apoiado por grandes navegadores: caniuse.com/#feat=css-stickysticky
pode ser uma solução, funciona no navegador moderno.Na minha opinião, o melhor método para lidar com isso é aplicar a mesma conversão, mas interromper os filhos que precisam ser corrigidos do elemento pai (traduzido); e aplique a conversão a uma div dentro do
position: fixed
wrapper.Os resultados são mais ou menos assim (no seu caso):
JSFiddle: https://jsfiddle.net/hju4nws1/
Embora isso possa não ser o ideal para alguns casos de uso, normalmente, se você estiver corrigindo uma div, provavelmente se preocupará menos com qual elemento é seu pai / onde ele fica na árvore de herança no seu DOM e parece resolver a maior parte da dor de cabeça. - enquanto ainda permite ambos
translate
eposition: fixed
viver em harmonia (relativa).fonte
Encontrei o mesmo problema. A única diferença é que meu elemento com 'position: fixed' tinha suas propriedades de estilo 'top' e 'left' definidas em JS. Então, pude aplicar uma correção:
O objeto oRect conterá coordenadas reais e superiores (em relação à porta de visualização). Assim, você pode ajustar suas propriedades reais oElement.style.top e oElement.style.left.
fonte
Eu tenho uma barra lateral fora da tela que usa -webkit-transform: translate3d. Isso estava me impedindo de colocar um rodapé fixo na página. Resolvi o problema direcionando uma classe na página html que é adicionada à tag na inicialização da barra lateral e, em seguida, escrevendo um qualificador css: not no estado "-webkit-transform: none;" para a tag html quando essa classe não estiver presente na tag html. Espero que isso ajude alguém por aí com esse mesmo problema!
fonte
Tente aplicar a conversão oposta ao elemento filho:
fonte
Adicione uma classe dinâmica enquanto o elemento se transforma.
$('#elementId').addClass('transformed')
. Em seguida, declare em css,então
então
Agora,
position: fixed
quando fornecidos com os valores de propriedade atop
ez-index
em um elemento filho, apenas funcione bem e permaneça fixo até que o elemento pai se transforme. Quando a transformação é revertida, o elemento filho aparece como corrigido novamente. Isso deve facilitar a situação se você estiver realmente usando uma barra lateral de navegação que abre e fecha com um clique e você tem um conjunto de guias que deve permanecer fixo ao rolar a página.fonte
Uma maneira de lidar com isso é aplicar a mesma transformação ao elemento fixo:
fonte