html - texto - Cómo corregir el parpadeo al utilizar transformaciones y transiciones de Webkit
parpadeo css blink (6)
Tengo una demostración muy simple que utiliza transformaciones y transiciones de Webkit para un desplazamiento horizontal suave entre "paneles" (divs).
La razón por la que quiero ir a esta ruta en lugar de a un sistema con Javascript es que es para el iPad y el rendimiento de Javascript es bastante bajo, pero las transformaciones y transiciones de CSS son tan suaves como la seda. Lamentablemente, sin embargo, estoy teniendo un montón de parpadeo en el iPad con mi Demo.
Puedes ver la demo aquí.
Necesitarás un safari o un iPad para verlo en acción. Nunca he visto que esto suceda en ninguna de las demostraciones para transformaciones y transiciones, así que espero que esto sea solucionable.
De todos modos aquí está el código que le da poder a la cosa ....
El HTML se ve así.
<html>
<head>
<title>Swipe Demo</title>
<link href="test.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="swiping.js"></script>
</head>
<body>
<div id="wrapper">
<div class=''panel one''>
<h1>This is panel 1</h1>
</div>
<div class=''panel two''>
<h1>This is panel 2</h1>
</div>
<div class=''panel three''>
<h1>This is panel 3</h1>
</div>
<div class=''panel four''>
<h1>This is panel 4</h1>
</div>
</div>
</body>
</html>
El CSS se ve así
body,
html
{
padding: 0;
margin: 0;
background: #000;
}
#wrapper
{
width: 10000px;
-webkit-transform: translateX(0px);
}
.panel
{
width: 1024px;
height: 300px;
background: #fff;
display: block;
float: left;
position: relative;
}
y el javascript se ve asi
// Mouse / iPad Touch
var touchSupport = (typeof Touch == "object"),
touchstart = touchSupport ? ''touchstart'' : ''mousedown'',
touchmove = touchSupport ? ''touchmove'' : ''mousemove'',
touchend = touchSupport ? ''touchend'' : ''mouseup'';
$(document).ready(function(){
// set top and left to zero
$("#wrapper").css("top", 0);
$("#wrapper").css("left", 0);
// get total number of panels
var panelTotal;
$(".panel").each(function(){ panelTotal += 1 });
// Touch Start
// ------------------------------------------------------------------------------------------
var touchStartX;
var touchStartY;
var currentX;
var currentY;
var shouldMove = false;
document.addEventListener(touchstart, swipeStart, false);
function swipeStart(event){
touch = realEventType(event);
touchStartX = touch.pageX;
touchStartY = touch.pageY;
var pos = $("#wrapper").position();
currentX = parseInt(pos.left);
currentY = parseInt(pos.top);
shouldMove = true;
}
// Touch Move
// ------------------------------------------------------------------------------------------
var touchMoveX;
var touchMoveY;
var distanceX;
var distanceY;
document.addEventListener(touchmove, swipeMove, false);
function swipeMove(event){
if(shouldMove){
touch = realEventType(event);
event.preventDefault();
touchMoveX = touch.pageX;
touchMoveY = touch.pageY;
distanceX = touchMoveX - touchStartX;
distanceY = touchMoveY - touchStartY;
movePanels(distanceX);
}
}
function movePanels(distance){
newX = currentX + (distance/4);
$("#wrapper").css("left", newX);
}
// Touch End
// ------------------------------------------------------------------------------------------
var cutOff = 100;
var panelIndex = 0;
document.addEventListener(touchend, swipeEnd, false);
function swipeEnd(event){
touch = (touchSupport) ? event.changedTouches[0] : event;
var touchEndX = touch.pageX;
var touchEndY = touch.pageY;
updatePanelIndex(distanceX);
gotToPanel();
shouldMove = false;
}
// -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
function updatePanelIndex(distance){
if(distanceX > cutOff)
panelIndex -= 1;
if(distanceX < (cutOff * -1)){
panelIndex += 1;
}
if(panelIndex < 0){
panelIndex = 0;
}
if(panelIndex >= panelTotal)
panelIndex = panelTotal -1;
console.log(panelIndex);
}
// -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
function gotToPanel(){
var panelPos = getTotalWidthOfElement($(".panel")) * panelIndex * -1;
$("#wrapper").css("-webkit-transition-property", "translateX");
$("#wrapper").css("-webkit-transition-duration", "1s");
$("#wrapper").css("-webkit-transform", "translateX("+panelPos+"px)");
}
});
function realEventType(event){
e = (touchSupport) ? event.targetTouches[0] : event;
return e;
}
@gargantaun tiene razón, el Webkit parpadea si el elemento que desea animar es más grande que la pantalla. Pero hay una solución fácil. Solo agrega:
-webkit-backface-visibility: hidden;
Al elemento y eres bueno para ir!
Basado en @tobiasahlin charla en WebExpo.
El parpadeo de Safari soluciona la mejor solución es
transform: translateZ(0);
Como se mencionó anteriormente, es mejor usar Translate3d debido a la aceleración del hardware que hace que las transiciones sean más suaves.
Sin embargo, el parpadeo se produce cuando el div que se está animando es más grande que la pantalla. Por lo tanto, si tiene un área que agrega hasta 3.5 anchos de pantalla que desea hacer una transición horizontal, debería dividirse en 4 divs como este
[1] [2] [3] [. 5]
Ninguno de los divs debe exceder la altura o el ancho de las pantallas.
Lo siento por la tardanza en publicar esta respuesta. Lo había olvidado por completo hasta que recibí un aviso de "pregunta popular".
Hoy en día, con iOS8, otra buena solución es aplicar un overflow: hidden a los elementos incriminados (o su contenedor).
Obtuve el parpadeo para desaparecer al hacer que la vista estuviera en un estado "3D". Primero tengo todos mis puntos de vista, tengo el preserve-3D activado. Luego tengo este código,
MyNamespace.flickerFixer = function(children) {
children.css({
"-webkitTransform": "translate3D(0px, 0px, 0px)",
"-webkit-transition": "1s ease-in-out"
});
}
Y luego lo inicializo antes de hacer animaciones de webkit:
MyNamespace.flickerFixer($this.parent(".ui-content"));
Trate de usar translate3d en lugar de translateX. Parece que solo translate3d es acelerado por hardware en iPad 3.2.