Posições corrigidas não funcionam ao usar -webkit-transform

Estou usando -webkit-transform (e -moz-transform / -o-transform) para girar uma div. Além disso, a posição fixa foi adicionada para que a div role com o usuário.

No Firefox, ele funciona bem, mas nos navegadores baseados em webkit está quebrado. Depois de usar a transformação -webkit, a posição corrigida não funciona mais! Como isso é possível?

Após algumas pesquisas, houve um relatório de bug no site do Chromium sobre esse problema, até o momento os navegadores Webkit não conseguem processar esses dois efeitos juntos ao mesmo tempo.

Eu sugeriria adicionar algum CSS apenas do Webkit à sua folha de estilo e transformar a div transformada em uma imagem e usá-la como plano de fundo.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

Então, por enquanto, você terá que fazer isso da maneira antiga, até que os navegadores Webkit atinjam o FF.

EDIT: A partir de 24/10/2012, o bug não foi resolvido.

Parece não ser um bug, mas um aspecto da especificação devido aos dois efeitos que exigem sistemas de coordenadas e ordens de empilhamento separados. Como explicado nesta resposta .

A especificação CSS Transforms explica esse comportamento. Os elementos com transformações agem como um bloco de contenção para descendentes de posições fixas; portanto, position: fixo em algo com uma transformação não tem mais comportamento fixo.

Eles funcionam quando aplicados ao mesmo elemento; o elemento será posicionado como fixo e depois transformado.

Para quem acha que suas imagens de plano de fundo estão desaparecendo no Chrome devido ao mesmo problema com o anexo de plano de fundo: corrigido; - esta foi a minha solução:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

Algo (um pouco hacky) que funcionou para mim é position:sticky:

.fixed {
     position: sticky;
}

Agosto de 2016 e posição fixa e animação / transformação ainda são um problema. A única solução que funcionou para mim - foi criar uma animação para o elemento filho que leva mais tempo.

Na verdade, eu encontrei outra maneira de corrigir esse "bug":

Eu tenho um elemento contêiner que contém página com animações CSS3. Quando a página concluiu a animação, a propriedade css3 possui o valor: transform: translate (0,0) ;. Então, acabei de remover essa linha e tudo funcionou como deveria - position: fixed é exibido corretamente. Quando a classe css é aplicada para traduzir a página, a propriedade translate é adicionada e a animação css3 também funciona.

Exemplo:

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

Demonstração: http://jsfiddle.net/ZWcD9/

no meu projeto phonegap, o webkit transform -webkit-transform: translateZ (0); funcionou como um encanto. Ele já estava funcionando no chrome e safari, mas não no navegador móvel. também pode haver mais um problema, pois os DIVs WRAPPER não são concluídos em alguns casos. aplicamos uma classe clara no caso de divs flutuantes.

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

Provavelmente devido a um erro no Chrome, pois não consigo replicar no Safari nem no Firefox, mas isso funciona no Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

É uma estrutura muito particular e, portanto, não é de forma alguma uma correção de CSS universalmente aplicável, mas talvez alguém possa mexer nela para fazê-la funcionar no Safari e Firefox.

Eu tive esse problema enquanto tentava implementar a cor do reator com visualizações de swipeable de reação (rsw). O problema para mim foi que rsw se aplica translate(-100%, 0)a um painel de guias que quebra a div de posição fixa padrão adicionada na tela inteira que, quando clicada, fecha o modelo do seletor de cores.

Para mim, a solução foi aplicar a transformação oposta ao elemento corrigido (nesse caso, translate(100%, 0)que corrigiu meu problema. Não tenho certeza se isso é útil em outros casos, mas pensei em compartilhar de qualquer maneira.

Aqui está um exemplo mostrando o que descrevi acima:

https://codepen.io/relativemc/pen/VwweEez

Adicionar o -webkit-transformelemento fixo resolveu o problema para mim.

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

Aqui está o que funciona para mim em todos os navegadores e dispositivos móveis testados (Chrome, IE, Firefox, Safari, iPad, iphone 5 e 6, Android).

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

a posição fixa de um elemento será interrompida se você aplicar a conversão a qualquer ancestral.

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

Se você pode usar o javascript como uma opção, isso pode ser uma solução alternativa para posicionar um elemento fixo da posição relutivo para a janela quando estiver dentro de um elemento transformado:

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

Concedido, você também terá que ajustar suas alturas e largura, porque fixedElcalculará isso com base no contêiner. Isso depende do seu caso de uso, mas isso permitirá que você defina previsivelmente a posição de algo fixo, independentemente de seu contêiner.

Adicione uma classe dinâmica enquanto o elemento se transforma. $('#elementId').addClass('transformed'). Em seguida, declare em css,

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

então

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

então

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

Agora position: fixed quando fornecido com os valores das propriedades top e z-index em um elemento filho, apenas funciona bem e permanece 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.

no meu caso, descobri que não podemos usar transform: translateX () antes de transform: translateY (). se quisermos usar os dois, devemos usar transform: translate (,).

Por favor, não vote, porque essa não é a resposta exata, mas pode ajudar alguém, porque é a maneira mais rápida de desativar a transformação. Se você realmente não precisa da transformação no pai e deseja que sua posição fixa volte a funcionar:

#element_with_transform {
  -webkit-transform: none;
  transform: none;
}