javascript - quitar - inspector google chrome
Forzar DOM redibujar/actualizar en Chrome/Mac (18)
De vez en cuando, Chrome representará el código HTML / CSS perfectamente válido de forma incorrecta o en absoluto. Cavar a través del inspector de DOM a menudo es suficiente para comprender el error de sus formas y volver a dibujar correctamente, por lo que es probable que el marcado sea bueno. Esto sucede con la frecuencia (y como era de esperar) lo suficiente en un proyecto en el que estoy trabajando, y puse un código en vigor para forzar un rediseño en ciertas circunstancias.
Esto funciona en la mayoría de las combinaciones de navegador / sistema operativo:
el.style.cssText += '';-webkit-transform:rotateZ(0deg)''
el.offsetHeight
el.style.cssText += '';-webkit-transform:none''
Al igual que en, ajuste algunas propiedades CSS no utilizadas, luego solicite información que obligue a volver a dibujar y, a continuación, deshaga la propiedad. Desafortunadamente, el brillante equipo detrás de Chrome para Mac parece haber encontrado una manera de obtener ese offsetHeight sin volver a dibujar. Así matando a un hack por lo demás útil.
Hasta ahora, lo mejor que he encontrado para obtener el mismo efecto en Chrome / Mac es esta pieza de fealdad:
$(el).css("border", "solid 1px transparent");
setTimeout(function()
{
$(el).css("border", "solid 0px transparent");
}, 1000);
Al igual que en, en realidad, obligue al elemento a saltar un poco, luego enfríe un segundo y salte hacia atrás. Para empeorar las cosas, si reduce el tiempo de espera por debajo de 500 ms (a donde sería menos notable), a menudo no tendrá el efecto deseado, ya que el navegador no volverá a dibujarse antes de volver a su estado original.
¿Alguien se preocupa por ofrecer una mejor versión de este truco de redibujado / actualización (preferiblemente basado en el primer ejemplo anterior) que funciona en Chrome / Mac?
Muestra de HTML:
<section id="parent">
<article class="child"></article>
<article class="child"></article>
</section>
Js:
jQuery.fn.redraw = function() {
return this.hide(0,function() {$(this).show(100);});
// hide immediately and show with 100ms duration
};
función de llamada:
// <== mala idea $(''article.child'').redraw();
$(''#parent'').redraw();
Esta es mi solución que funcionó para desaparecer contenido ...
<script type = ''text/javascript''>
var trash_div;
setInterval(function()
{
if (document.body)
{
if (!trash_div)
trash_div = document.createElement(''div'');
document.body.appendChild(trash_div);
document.body.removeChild(trash_div);
}
}, 1000 / 25); //25 fps...
</script>
Esta solución sin tiempos de espera! Fuerza real redibujar! Para Android y iOS.
var forceRedraw = function(element){
var disp = element.style.display;
element.style.display = ''none'';
var trick = element.offsetHeight;
element.style.display = disp;
};
Esto funciona para mi Felicitaciones ir aquí .
jQuery.fn.redraw = function() {
return this.hide(0, function() {
$(this).show();
});
};
$(el).redraw();
Esto parece hacer el truco para mí. Además, realmente no se muestra en absoluto.
$(el).css("opacity", .99);
setTimeout(function(){
$(el).css("opacity", 1);
},20);
La mayoría de las respuestas requieren el uso de un tiempo de espera asíncrono, lo que provoca un parpadeo molesto.
Pero se me ocurrió esto, que funciona sin problemas porque es sincrónico:
var p = el.parentNode,
s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);
Me encontré con este desafío hoy en OSX El Capitan con Chrome v51. La página en cuestión funcionó bien en Safari. Intenté casi todas las sugerencias en esta página, ninguna funcionó bien, todas tuvieron efectos secundarios ... Acabé de implementar el código a continuación, super simple, sin efectos secundarios (todavía funciona como antes en Safari).
Solución: alternar una clase en el elemento problemático según sea necesario. Cada interruptor forzará un redibujado. (Utilicé jQuery por conveniencia, pero JavaScript de vainilla no debería ser un problema ...)
JQuery Class Toggle
$(''.slide.force'').toggleClass(''force-redraw'');
Clase CSS
.force-redraw::before { content: "" }
Y eso es...
NOTA: Debe ejecutar el fragmento debajo de "Página completa" para ver el efecto.
$(window).resize(function() {
$(''.slide.force'').toggleClass(''force-redraw'');
});
.force-redraw::before {
content: "";
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.slide-container {
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding-left: 10%;
padding-right: 5%;
}
.slide {
position: relative;
display: inline-block;
height: 30%;
border: 1px solid green;
}
.slide-sizer {
height: 160%;
pointer-events: none;
//border: 1px solid red;
}
.slide-contents {
position: absolute;
top: 10%;
left: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
This sample code is a simple style-based solution to maintain aspect ratio of an element based on a dynamic height. As you increase and decrease the window height, the elements should follow and the width should follow in turn to maintain the aspect ratio. You will notice that in Chrome on OSX (at least), the "Not Forced" element does not maintain a proper ratio.
</p>
<div class="slide-container">
<div class="slide">
<img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div class="slide-contents">
Not Forced
</div>
</div>
<div class="slide force">
<img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div class="slide-contents">
Forced
</div>
</div>
</div>
Me encontré con un problema similar y esta simple línea de JS ayudó a solucionarlo:
document.getElementsByTagName(''body'')[0].focus();
En mi caso, fue un error con una extensión de Chrome que no vuelve a dibujar la página después de cambiar su CSS desde dentro de la extensión.
Mi corrección para IE10 + IE11. Básicamente, lo que sucede es que se agrega un DIV dentro de un elemento de envoltura que debe recalcularse. Entonces sólo quítalo y listo! Funciona de maravilla :)
_initForceBrowserRepaint: function() {
$(''#wrapper'').append(''<div style="width=100%" id="dummydiv"></div>'');
$(''#dummydiv'').width(function() { return $(this).width() - 1; }).width(function() { return $(this).width() + 1; });
$(''#dummydiv'').remove();
},
Ninguna de las respuestas anteriores funcionó para mí. Noté que cambiar el tamaño de mi ventana causó un redibujado. Así que esto lo hizo por mí:
$(window).trigger(''resize'');
No estoy seguro exactamente de lo que estás tratando de lograr, pero este es un método que he usado en el pasado con éxito para forzar que el navegador se vuelva a dibujar, tal vez funcione para ti.
// in jquery
$(''#parentOfElementToBeRedrawn'').hide().show(0);
// in plain js
document.getElementById(''parentOfElementToBeRedrawn'').style.display = ''none'';
document.getElementById(''parentOfElementToBeRedrawn'').style.display = ''block'';
Si este simple redibujo no funciona, puedes probar este. Inserta un nodo de texto vacío en el elemento que garantiza un redibujado.
var forceRedraw = function(element){
if (!element) { return; }
var n = document.createTextNode('' '');
var disp = element.style.display; // don''t worry about previous display style
element.appendChild(n);
element.style.display = ''none'';
setTimeout(function(){
element.style.display = disp;
n.parentNode.removeChild(n);
},20); // you can play with this timeout to make it as short as possible
}
EDITAR: En respuesta a Šime Vidas, lo que estamos logrando aquí sería un reflujo forzado. Puede obtener más información en el maestro mismo http://paulirish.com/2011/dom-html5-css3-performance/
Ocultar un elemento y luego mostrarlo nuevamente dentro de un setTimeout de 0 forzará un redibujado.
$(''#page'').hide();
setTimeout(function() {
$(''#page'').show();
}, 0);
Recientemente descubrimos esto y descubrimos que la promoción del elemento afectado a una capa compuesta con translateZ solucionó el problema sin necesidad de javascript adicional.
.willnotrender {
transform: translateZ(0);
}
Como estos problemas de pintura aparecen principalmente en Webkit / Blink, y esta solución se dirige principalmente a Webkit / Blink, en algunos casos es preferible. Especialmente porque muchas soluciones de JavaScript causan un reflujo y repintado , no solo un repintado.
Sólo CSS. Esto funciona para situaciones en las que se elimina o agrega un elemento secundario. En estas situaciones, los bordes y las esquinas redondeadas pueden dejar artefactos.
el:after { content: " "; }
el:before { content: " "; }
Si desea conservar los estilos declarados en sus hojas de estilo, mejor utilice algo como:
jQuery.fn.redraw = function() {
this.css(''display'', ''none'');
var temp = this[0].offsetHeight;
this.css(''display'', '''');
temp = this[0].offsetHeight;
};
$(''.layer-to-repaint'').redraw();
NB: con el último webkit / blink, el almacenamiento del valor de offsetHeight es obligatorio para activar el repintado, de lo contrario, la VM (para fines de optimización) probablemente omita esa instrucción.
Actualización: agregada la segunda lectura de offsetHeight , es necesario evitar que el navegador offsetHeight en cola / almacene en caché una siguiente propiedad / cambio de clase CSS con la restauración del valor de display (de esta manera se debe representar una transición de CSS que pueda seguir)
Un enfoque que funcionó para mí en IE (no pude usar la técnica de visualización porque había una entrada que no debía perder el foco)
Funciona si tiene un margen de 0 (cambiar el relleno también funciona)
if(div.style.marginLeft == ''0px''){
div.style.marginLeft = '''';
div.style.marginRight = ''0px'';
} else {
div.style.marginLeft = ''0px'';
div.style.marginRight = '''';
}
call window.getComputedStyle() debería forzar un reflujo
function resizeWindow(){
var evt = document.createEvent(''UIEvents'');
evt.initUIEvent(''resize'', true, false,window,0);
window.dispatchEvent(evt);
}
Llama a esta función después de 500 milisegundos.