0
376
ViewsInteresante problema de representación de Css en el zoom: el navegador muestra un espacio entre los contenedores al hacer zoom, ocurre en todos los navegadores, pero no en Firefox
Tengo un problema interesante y extraño con los estilos css y acercar y alejar el navegador.
Creé una tarjeta de interfaz de usuario de material con la que se cambió el color de fondo al hacer clic con animación.
La animación funciona bien, pero si acerca o aleja la página, el navegador genera una brecha en algunos porcentajes de valor de zoom. Es más, el hueco aparece aleatoriamente en algunas cartas, mientras que en otras todo está bien.
He visto algunos casos similares mientras buscaba una solución, pero ninguno funciona, incluso hay voces que dicen que no se puede hacer mucho con este tipo de problema. Ejemplos: problema de representación (¿redondeo?) en Chrome al hacer zoom IE11 dibuja una línea pequeña entre los elementos posicionadosespacio en blanco entre mosaicos de imagen al hacer zoom
Cualquier consejo o ayuda será bienvenida. Estoy peleando con esto por un par de días :P
He preparado una demostración https://codesandbox.io/s/animate-divs-forked-1b3v4g . Parece que hacer un div simple de contenedor o una tarjeta de material ui y usar border-radius: 0px no hace ninguna diferencia, la brecha aún ocurre, principalmente en navegadores que no sean mozilla firefox. Simplemente haga clic en el contenedor, acerque o aleje en cromo o borde y lo verá. EDITAR: cambiar el borde inferior ya que incluso el número de píxeles parece ayudar en algunos niveles de zoom (¿50%?), Pero no en todos. En firefox todo bien. 
1 answers
Answer question0
Intente eliminar la propiedad de borde en la clase BigDiv y cree la segunda pseudoclase. Creo que podría ser un problema de renderizado del motor de parpadeo .
clase BigDiv
display: flex; min-width: 220px; height: 100%; position: relative; padding: ${theme.spacing(2, 0)}; border-bottom: orange 5px solid; /* remove this */ background-color: transparent; cursor: pointer; text-align: center; transition-delay: 0.5s; will-change: transform; /* Add this */ ::before { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background-color: orange; } document.addEventListener('DOMContentLoaded', function() { const click = document.querySelector('.big'); const click2 = document.querySelector('.big2'); click.addEventListener('click', e => { e.currentTarget.classList.toggle('active'); }); click2.addEventListener('click', e => { e.currentTarget.classList.toggle('active'); }); }); .big, .big2 { width: 220px; height: 100%; position: relative; padding: 1rem 2rem; background-color: transparent; cursor: pointer; text-align: center; transition-delay: 0.5s; will-change: transform; } .big { border-bottom: orange 4px solid; } .big::after, .big2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: orange; animation: out 0.5s ease-in-out forwards; transform-origin: bottom center; } .big2::before { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background-color: orange; } .big.active::after, .big2.active::after { animation: in 0.5s ease-in-out forwards; } .second { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 1; } @keyframes in { 0% { transform: scaleY(0); background-color: transparent; } 100% { transform: scaleY(1); background-color: orange; } } @keyframes out { 0% { transform: scaleY(1); background-color: orange; } 100% { transform: scaleY(0); background-color: transparent; } } <div class="big"> <div class="second"> <p>Click to animate with border</p> </div> </div> <div class="big2"> <div class="second"> <p>Click to animate pseudo-class</p> </div> </div>