Tengo un formulario-contenedor que muestra fotos con cierta información adicional; en realidad está incluido en un bucle de PHP, por lo que se muestran tres a la vez: <div> <!--Bloque con cada una de las fotos del top 3--> <form class="contenedor-top3" data-prueba="prueba" method="post" action="<?=url_base?>recopilatorios/indice"> <img class="imagen-top3" src="<?=url_base?>recursos/imagenes/autores/<?=$nombre_autor?>.jpg"> <div class="numero-top3" data-contador2="<?=$contador?>"><?=$contador?></div> <div class="icono estrella-top3 oculto">R</div> <div class="nota-top3 oculto"><?=$nota_media?></div> <div class="referencia-top3"><a href="<?=$foto_autor?>" target="_blank">©</a></div> <div class="texto-top3"><span class="cancion-top3"><?=$titulo_cancion?></span> de <span class= "autor-top3"><?=$nombre_autor_orden?></span> <span class="ano-top3">(<button class="boton-enlace" role="link" name="recopilatorio" value="<?=$recopilatorio?>"><?=$ano?></button>)</span></div> </form> </div> Con los siguientes estilos: .contenedor-top3 { position: absolute; display: inline-block; text-align: right; transition: all 1s ease; } /*Contenedor de las fotos*/ La página se ve así: [![introducir la descripción de la imagen aquí][1]][1] También tengo un script jQuery que añade ciertos estilos al pasar el ratón por encima de cada foto: $(function() { $('.contenedor-top3').mouseenter(function() //Al pasar el ratón por encima { let $contador2 = $(this).find('.numero-top3').data('contador2'); //Identifica el puesto en la clasificación de la canción if($contador2 == 1) //Si es la nº 1 le aplica unos estilos { $(this).find('.imagen-top3').addClass('sombra-oro'); $(this).find('.numero-top3').addClass('numero-oro'); $(this).find('.nota-top3').removeClass('oculto'); $(this).find('.estrella-top3').removeClass('oculto'); $(this).find('.ano-top3').css('color', 'mediumvioletred'); } else if($contador2 == 2) //Si es la nº 2, otros { $(this).find('.imagen-top3').addClass('sombra-plata'); $(this).find('.numero-top3').addClass('numero-plata'); $(this).find('.nota-top3').removeClass('oculto'); $(this).find('.estrella-top3').removeClass('oculto'); $(this).find('.ano-top3').css('color', 'mediumvioletred'); } else //Si es la nº 3 -no hay más-, otros { $(this).find('.imagen-top3').addClass('sombra-bronce'); $(this).find('.numero-top3').addClass('numero-bronce'); $(this).find('.nota-top3').removeClass('oculto'); $(this).find('.estrella-top3').removeClass('oculto'); $(this).find('.ano-top3').css('color', 'mediumvioletred'); } $('.contenedor-top3').not(this).css({'filter': 'blur(15px)', 'transform': 'scale(0.85)'}); //A las otras dos fotos, las difumina $(this).css({'transform': 'scale(1.25)', 'zIndex': '3'}); //Y a la elegida la agranda $(this).find('.numero-top3').addClass('shake-slow shake-constant'); //Y hace que vibre el número }); $('.contenedor-top3').mouseleave(function() //Al retirar el ratón, revierte los cambios { let $contador2 = $(this).find('.numero-top3').data('contador2'); if($contador2 == 1) { $(this).find('.imagen-top3').removeClass('sombra-oro'); $(this).find('.numero-top3').removeClass('numero-oro'); $(this).find('.nota-top3').addClass('oculto'); $(this).find('.estrella-top3').addClass('oculto'); $(this).find('.ano-top3').css('color', 'black'); } else if($contador2 == 2) { $(this).find('.imagen-top3').removeClass('sombra-plata'); $(this).find('.numero-top3').removeClass('numero-plata'); $(this).find('.nota-top3').addClass('oculto'); $(this).find('.estrella-top3').addClass('oculto'); $(this).find('.ano-top3').css('color', 'black'); } else { $(this).find('.imagen-top3').removeClass('sombra-bronce'); $(this).find('.numero-top3').removeClass('numero-bronce'); $(this).find('.nota-top3').addClass('oculto'); $(this).find('.estrella-top3').addClass('oculto'); $(this).find('.ano-top3').css('color', 'black'); } $('.contenedor-top3').not(this).css({'filter': 'blur(0px)', 'transform': 'scale(1)'}); $(this).css({'transform': 'scale(1)', 'zIndex': ''}); $(this).find('.numero-top3').removeClass('shake-slow shake-constant'); }); }); El problema está aquí: $('.contenedor-top3').not(this).css({'filter': 'blur(15px)', 'transform': 'scale(0.85)'}); //A las otras dos fotos, las difumina $(this).css({'transform': 'scale(1.25)', 'zIndex': '3'}); //Y a la elegida la agranda La regla `transform: scale` funciona de manera muy tosca, haciendo temblar las fotos, que parpadeen, o que incluso se vean artefactos fugaces (he identificado una línea roja bastante aparente). Lo cierto es que son anomalías que han empezado a ocurrir recientemente, tras hacer cambios en otras partes de la web que yo creo que no tienen nada que ver con ésta. Aunque tampoco tengo claro a raíz de qué cambios en concreto empezaron a ocurrir... ¿Se os ocurre qué puede ser? He encontrado el siguiente enlace donde se detalla un problema muy similar: https://www.iteramos.com/pregunta/62098/-transformacion-escala-causando-39-parpadear-39-cuando-se-pasa Y se ofrecen soluciones relacionadas con ajustes del navegador, como por ejemplo: -webkit-backface-visibility: hidden; Pero las he probado todas y ninguna parece funcionarme. A ver si alguno sabe por dónde pueden ir los tiros. Gracias de antemano. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> /* Aplica estilos específicos -fijos- a las fotos del top 3 */ $(function() //En función de su puesto en la clasificación, aplica unos estilos u otros para que cada foto se situe en su sitio { $('[data-contador2="1"]').css('left', '30px'); //Puesto en la clasificación $('[data-contador2="2"]').css('right', '50px'); $('[data-contador2="3"]').css('left', '30px'); $('[data-contador2="1"]').next().css('right', '40px'); //Estrella que contiene a la nota media $('[data-contador2="2"]').next().css('left', '40px'); $('[data-contador2="3"]').next().css('right', '40px'); $('[data-contador2="1"]').next().next().css('right', '62.5px'); //Nota media $('[data-contador2="2"]').next().next().css('left', '62.5px'); $('[data-contador2="3"]').next().next().css('right', '62.5px'); $('[data-contador2="1"]').parent().addClass('contenedor1'); //Contenedor de la foto $('[data-contador2="2"]').parent().addClass('contenedor2'); $('[data-contador2="3"]').parent().addClass('contenedor3'); $('[data-contador2="3"]').prev().css('margin-bottom', '75px'); //Da espacio inferior a la tercera foto para que se vea la sombra color bronce $('[data-contador2="3"]').next().next().next().css('margin-bottom', '75px'); $('[data-contador2="3"]').next().next().next().next().css('margin-bottom', '75px'); }); /* Aplica estilos específicos a las fotos del top 3 al pasar el ratón por encima de una de ellas */ $(function() { $('.contenedor-top3').mouseenter(function() //Al pasar el ratón por encima { let $contador2 = $(this).find('.numero-top3').data('contador2'); //Identifica el puesto en la clasificación de la canción if($contador2 == 1) //Si es la nº 1 le aplica unos estilos { $(this).find('.imagen-top3').addClass('sombra-oro'); $(this).find('.numero-top3').addClass('numero-oro'); $(this).find('.nota-top3').removeClass('oculto'); $(this).find('.estrella-top3').removeClass('oculto'); $(this).find('.ano-top3').css('color', 'mediumvioletred'); } else if($contador2 == 2) //Si es la nº 2, otros { $(this).find('.imagen-top3').addClass('sombra-plata'); $(this).find('.numero-top3').addClass('numero-plata'); $(this).find('.nota-top3').removeClass('oculto'); $(this).find('.estrella-top3').removeClass('oculto'); $(this).find('.ano-top3').css('color', 'mediumvioletred'); } else //Si es la nº 3 -no hay más-, otros { $(this).find('.imagen-top3').addClass('sombra-bronce'); $(this).find('.numero-top3').addClass('numero-bronce'); $(this).find('.nota-top3').removeClass('oculto'); $(this).find('.estrella-top3').removeClass('oculto'); $(this).find('.ano-top3').css('color', 'mediumvioletred'); } $('.contenedor-top3').not(this).css({'filter': 'blur(15px)', 'transform': 'scale(0.85)'}); //A las otras dos fotos, las difumina $(this).css({'transform': 'scale(1.25)', 'zIndex': '3'}); //Y a la elegida la agranda $(this).find('.numero-top3').addClass('shake-slow shake-constant'); //Y hace que vibre el número }); $('.contenedor-top3').mouseleave(function() //Al retirar el ratón, revierte los cambios { let $contador2 = $(this).find('.numero-top3').data('contador2'); if($contador2 == 1) { $(this).find('.imagen-top3').removeClass('sombra-oro'); $(this).find('.numero-top3').removeClass('numero-oro'); $(this).find('.nota-top3').addClass('oculto'); $(this).find('.estrella-top3').addClass('oculto'); $(this).find('.ano-top3').css('color', 'black'); } else if($contador2 == 2) { $(this).find('.imagen-top3').removeClass('sombra-plata'); $(this).find('.numero-top3').removeClass('numero-plata'); $(this).find('.nota-top3').addClass('oculto'); $(this).find('.estrella-top3').addClass('oculto'); $(this).find('.ano-top3').css('color', 'black'); } else { $(this).find('.imagen-top3').removeClass('sombra-bronce'); $(this).find('.numero-top3').removeClass('numero-bronce'); $(this).find('.nota-top3').addClass('oculto'); $(this).find('.estrella-top3').addClass('oculto'); $(this).find('.ano-top3').css('color', 'black'); } $('.contenedor-top3').not(this).css({'filter': 'blur(0px)', 'transform': 'scale(1)'}); $(this).css({'transform': 'scale(1)', 'zIndex': ''}); $(this).find('.numero-top3').removeClass('shake-slow shake-constant'); }); }); <!-- language: lang-css --> /* COLORES */ :root { --color1: pink; --color2: mediumvioletred; --color3: purple; } /* FUENTES */ @font-face { font-family: "Web Symbols"; src: url(../fuentes/WebSymbols-Regular.otf); font-weight: normal; font-style: normal; } /* ESTILOS GENERALES */ .oculto { display: none; } .icono { font-family: "Web Symbols"; } /*Convierte letras en iconos*/ /* BOTONES Y ENLACES */ .boton-enlace { border: 0; padding: 0; margin: 0; background: none; transition: all 0.25s ease; } .boton-enlace:hover { color: var(--color2); } .boton-enlace:active { color: var(--color3); } .boton-enlace:focus { outline: none; box-shadow: none; } /*Simula un enlace a partir de un botón*/ /* TOP 3 GENERAL */ .contenedor-top3 { position: absolute; display: inline-block; text-align: right; transition: all 1s ease; } /*Contenedor de las fotos*/ .contenedor1 { margin-top: 75px; z-index: 2; } .contenedor2 { top: 300px; left: 530px; z-index: 1; } .contenedor3 { top: 610px; left: 140px; } /* Clases aplicadas por el script de jQuery a cada una de las fotos del top 3*/ .sombra-oro { box-shadow: 0 0 25px 20px #ffff9e; } .sombra-plata { box-shadow: 0 0 25px 20px grey; } .sombra-bronce { box-shadow: 0 0 25px 20px bisque; } /*Sombras aplicadas por el script de jQuery a los contenedores de las fotos*/ .imagen-top3 { height: 400px; width: 600px; border-radius: 20px; transition: all 1s ease; } .numero-top3 { position: absolute; top: 20px; color: var(--color2); font-weight: bold; font-size: 75px; font-family: 'Rock Salt', cursive; text-shadow: 5px 5px 4px var(--color1); transition: all 0.25s ease; } /*Puesto en la clasificación*/ .numero-oro { color: gold; text-shadow: 5px 5px 14px yellow; } .numero-plata { color: silver; text-shadow: 5px 5px 4px gainsboro; } .numero-bronce { color: #CD7F32; text-shadow: 5px 5px 4px bisque; } /*Estilos aplicados a los números de la clasificación por el script de jQuery*/ .estrella-top3 { position: absolute; top: 10px; color: #f0ad4e; font-size: 4em; } /*Estrella que sirve de fondo a la nota media*/ .nota-top3 { position: absolute; top: 53px; color: sienna; font-weight: bold; } /*Nota media en sí*/ .referencia-top3 { position: absolute; bottom: 20px; left: 20px; } .referencia-top3 a { text-decoration: none; font-weight: bold; font-size: 1.25em; color: white; transition: all 0.25s ease; } .referencia-top3 a:hover { text-decoration: none; color: var(--color1); } /*Enlace que redirige a la web de la que se ha tomado la fotografía*/ .texto-top3 { position: absolute; bottom: 20px; right: 20px; background-color: powderblue; border: 2.5px solid lightblue; border-radius: 10px; padding: 5px; max-width: 87.5%; transition: all 1s ease; } .cancion-top3 { color: var(--color3); font-style: italic; font-weight: bold; font-size: 1.2em; } .autor-top3 { font-weight: bold; font-size: 1.2em; } .ano-top3 { font-size: 1.2em; } /*Año*/ .boton-vamos { margin-top: 517.5px; margin-left: 370px; padding: 10px 20px; } <!-- language: lang-html --> <!DOCTYPE html> <html lang="es"> <head> <title>50 años de Era Pop</title> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Rock+Salt&display=swap" rel="stylesheet"/> <!-- Bootstrap --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/> <!-- CSShake --> <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css"/> <!-- Animsition --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/js/animsition.min.js"></script> <script type="text/javascript" src="../recursos/js/animsition.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.min.css"/> <!-- Charts.js --> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <!-- Sweet Alert--> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <!-- JS propio --> <script type="text/javascript" src="../recursos/js/audio_youtube.js"></script> <script type="text/javascript" src="../recursos/js/scripts.js"></script> <!-- jQuery Migrate --> <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <!-- CSS propio --> <link href="../recursos/css/estilos.css" type="text/css" rel="stylesheet"/> <link href="../recursos/css/estrellas.css" type="text/css" rel="stylesheet"/> <link href="css/estrella.css" type="text/css" rel="stylesheet"/> </head> <body> <main class="container"> <section class="fotos" style="max-height: 1085px;"> <!--Sección con las tres fotos del top 3--> <div> <!--Bloque con la foto 1--> <form class="contenedor-top3" data-prueba="prueba" method="post" action=""> <img class="imagen-top3" src="https://bit.ly/3bKioJU"> <div class="numero-top3" data-contador2="1">1</div> <div class="icono estrella-top3 oculto">R</div> <div class="nota-top3 oculto">4,6</div> <div class="referencia-top3"><a href="https://bit.ly/3bKioJU" target="_blank">©</a></div> <div class="texto-top3"> <span class="cancion-top3">Ace of spades</span> <span> de </span> <span class= "autor-top3">Motörhead</span> <span class="ano-top3">(<button class="boton-enlace" role="link" name="recopilatorio" value="">1980</button>)</span> </div> </form> </div> <div> <!--Bloque con la foto 2--> <form class="contenedor-top3" data-prueba="prueba" method="post" action=""> <img class="imagen-top3" src="https://bit.ly/3q8lCeK"> <div class="numero-top3" data-contador2="2">2</div> <div class="icono estrella-top3 oculto">R</div> <div class="nota-top3 oculto">4,1</div> <div class="referencia-top3"><a href="https://bit.ly/3q8lCeK" target="_blank">©</a></div> <div class="texto-top3"> <span class="cancion-top3">Best of you</span> <span> de </span> <span class= "autor-top3">Foo Fighters</span> <span class="ano-top3">(<button class="boton-enlace" role="link" name="recopilatorio" value="">2005</button>)</span> </div> </form> </div> <div> <!--Bloque con cada una de las fotos del top 3--> <form class="contenedor-top3" data-prueba="prueba" method="post" action=""> <img class="imagen-top3" src="https://bit.ly/3onioCO"> <div class="numero-top3" data-contador2="3">3</div> <div class="icono estrella-top3 oculto">R</div> <div class="nota-top3 oculto">3,9</div> <div class="referencia-top3"><a href="https://bit.ly/3onioCO" target="_blank">©</a></div> <div class="texto-top3"> <span class="cancion-top3">Town called Malice</span> <span> de </span> <span class= "autor-top3">The Jam</span> <span class="ano-top3">(<button class="boton-enlace" role="link" name="recopilatorio" value="1980">1980</button>)</span> </div> </form> </div> <button class="boton-vamos btn btn-info" data-toggle="modal" data-target="#modal-decadas" type="submit">¡Vamos!</button> </section> <!--Fin de la sección de fotos--> </main> <!-- end snippet --> [1]: https://i.sstatic.net/pQGwv.jpg