html - images - transition rotate

Las posiciones corregidas no funcionan cuando se utiliza-webkit-transform

Question

Estoy usando -webkit-transform (y -moz-transform / -o-transform) para rotar un div. También se ha agregado una posición fija para que el div se deslice hacia abajo con el usuario.

En Firefox funciona bien, pero en los navegadores basados ​​en webkit está roto. ¡Después de usar la transformación -webkit, la posición fija ya no funciona! ¿Cómo es eso posible?

Answer 1

la posición fija de un elemento se rompe si aplica la transformación a cualquier antecesor.

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

Answer 2

Agosto de 2016 y posición fija y animación / transformación sigue siendo un problema. La única solución que funcionó para mí fue crear una animación para el elemento secundario que lleva más tiempo.

Answer 3

Agregar el -webkit-transform al elemento fijo resolvió el problema para mí.

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

Answer 4

Algo (un poco hacky) que funcionó para mí es la position:sticky lugar:

.fixed {
position: sticky;
}

Answer 5

Después de algunas investigaciones, ha habido un informe de error en el sitio web de Chromium sobre este tema, hasta ahora los navegadores Webkit no pueden procesar estos dos efectos al mismo tiempo.

Sugeriría agregar un poco de Webkit solo CSS en su hoja de estilo y hacer que el div transformado sea una imagen y usarlo como fondo.

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari) */
#transformed_div {
/* styles here, background image etc */
}
}

Así que, por ahora, tendrás que hacerlo a la vieja usanza, hasta que los navegadores Webkit alcancen a FF.

EDITAR: A partir del 10/24/2012 el error no se ha resuelto.

Esto parece no ser un error, sino un aspecto de la especificación debido a los dos efectos que requieren sistemas de coordenadas y órdenes de apilamiento por separado. Como se explica en esta respuesta .

Answer 6

En realidad, encontré otra forma de arreglar este "error":

Tengo el elemento contenedor que contiene la página con animaciones css3. Cuando la página completaba la animación, la propiedad css3 tiene valor: transform: translate (0,0) ;. Entonces, simplemente eliminé esta línea, y todo funcionó como debería: posición: fijo se muestra correctamente. Cuando se aplica la clase css para traducir la página, se agrega la propiedad translate y la animación css3 también funciona.

Ejemplo:

.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);
}

Demostración: http://jsfiddle.net/ZWcD9/

Answer 7

Esto es lo que funciona para mí en todos los buscadores y dispositivos móviles (Chrome, IE, Firefox, Safari, iPad, iPhone 5 y 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%);
}

Answer 8

La especificación CSS Transforms explica este comportamiento. Los elementos con transformaciones actúan como un bloque contenedor para descendientes de posición fija, por lo que la posición: fija bajo algo con una transformación ya no tiene un comportamiento fijo.

Funcionan cuando se aplican al mismo elemento; el elemento se posicionará como fijo, y luego se transformará.

Answer 9

Para cualquier persona que encuentre que sus imágenes de fondo están desapareciendo en Chrome debido al mismo problema con background-attachment: fixed; - esta fue mi solución:

// 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'');
});
}

Answer 10

Por favor, no vote, porque esta no es una respuesta exacta, pero podría ayudar a alguien porque es la forma más rápida de desactivar la transformación. Si realmente no necesita la transformación en el elemento primario y desea que su posición fija vuelva a funcionar:

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

Answer 11

Probablemente debido a un error en Chrome, ya que no puedo replicar en Safari ni Firefox, pero esto funciona en Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

Es una estructura muy particular, por lo que no es de ninguna manera un arreglo de css de una línea universalmente aplicable, pero tal vez alguien pueda manipularla para que funcione en Safari y Firefox.

Answer 12

Si puede usar javascript como una opción, esto puede ser una solución para posicionar un elemento fijo de posición relavtivo a la ventana cuando está dentro de un 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`
}

De acuerdo, también tendrás que ajustar tus alturas y ancho porque fixedEl calculará con base en su contenedor. Eso depende de su caso de uso, pero esto le permitirá establecer predeciblemente la posición de algo fijo, independientemente de su contenedor.

Answer 13

en mi proyecto de facsímil, la transformación de webkit -webkit-transform: translateZ (0); trabajado como un encanto. Ya estaba funcionando en Chrome y Safari, no solo en el navegador móvil. también puede haber un problema más: los DIV WRAPPER no se completan en algunos casos. aplicamos una clase clara en caso de DIV flotantes.

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