Buộc DOM vẽ lại / làm mới trên Chrome / Mac

Thỉnh thoảng, Chrome sẽ hiển thị HTML / CSS hoàn toàn hợp lệ không chính xác hoặc hoàn toàn không. Đi sâu vào trình kiểm tra DOM thường đủ để khiến nó nhận ra lỗi theo cách của mình và vẽ lại chính xác, do đó, có thể chứng minh rằng việc đánh dấu là tốt. Điều này xảy ra thường xuyên (và có thể dự đoán) trong một dự án tôi đang thực hiện rằng tôi đã đặt mã tại chỗ để buộc vẽ lại trong một số trường hợp nhất định.

Điều này hoạt động trong hầu hết các kết hợp trình duyệt / os:

    el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
    el.offsetHeight
    el.style.cssText += ';-webkit-transform:none'

Như trong, điều chỉnh một số thuộc tính CSS không được sử dụng, sau đó yêu cầu một số thông tin buộc vẽ lại, sau đó gỡ bỏ thuộc tính. Thật không may, đội ngũ sáng giá đằng sau Chrome cho Mac dường như đã tìm ra cách để có được sự bù đắp đó mà không cần vẽ lại. Do đó, giết một hack hữu ích khác.

Cho đến nay, điều tốt nhất tôi nghĩ ra để có được hiệu ứng tương tự trên Chrome / Mac là phần xấu xí này:

    $(el).css("border", "solid 1px transparent");
    setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

Như trong, thực sự buộc phần tử nhảy một chút, sau đó làm lạnh một giây và nhảy trở lại. Làm cho nó tệ hơn, nếu bạn giảm thời gian chờ đó xuống dưới 500ms (đến nơi nó sẽ ít được chú ý hơn), nó thường sẽ không có hiệu ứng mong muốn, vì trình duyệt sẽ không quay lại để vẽ lại trước khi nó trở lại trạng thái ban đầu.

Bất cứ ai quan tâm để cung cấp một phiên bản tốt hơn của bản vẽ lại / làm mới này (tốt nhất là dựa trên ví dụ đầu tiên ở trên) hoạt động trên Chrome / Mac?

Không chắc chắn chính xác những gì bạn đang cố gắng đạt được nhưng đây là một phương pháp tôi đã sử dụng thành công trong quá khứ để buộc trình duyệt vẽ lại, có thể nó sẽ hiệu quả với bạn.

// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

Nếu việc vẽ lại đơn giản này không hiệu quả, bạn có thể thử cái này. Nó chèn một nút văn bản trống vào phần tử đảm bảo vẽ lại.

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
}

EDIT: Để đáp ứng với Vidime Vidas, những gì chúng ta đang đạt được ở đây sẽ là một trào lưu cưỡng bức. Bạn có thể tìm hiểu thêm từ chính chủ http://paulirish.com/2011/dom-html5-css3-performance/

Không có câu trả lời nào ở trên làm việc cho tôi. Tôi đã nhận thấy rằng thay đổi kích thước cửa sổ của tôi đã gây ra vẽ lại. Vì vậy, điều này đã làm điều đó cho tôi:

$(window).trigger('resize');

Gần đây chúng tôi đã gặp phải điều này và phát hiện ra rằng việc quảng bá phần tử bị ảnh hưởng lên một lớp tổng hợp với translZ đã khắc phục vấn đề mà không cần thêm javascript.

.willnotrender { 
   transform: translateZ(0); 
}

Vì các sự cố vẽ này xuất hiện chủ yếu trong Webkit / Blink và cách khắc phục này chủ yếu nhắm vào Webkit / Blink, nên trong một số trường hợp, nó thích hợp hơn. Đặc biệt là vì nhiều giải pháp JavaScript gây ra phản xạ và sơn lại , không chỉ là sơn lại.

Giải pháp này không có thời gian chờ! Thực lực vẽ lại! Dành cho Android và iOS.

var forceRedraw = function(element){
  var disp = element.style.display;
  element.style.display = 'none';
  var trick = element.offsetHeight;
  element.style.display = disp;
};

Điều này làm việc cho tôi. Kudos đi đây .

jQuery.fn.redraw = function() {
    return this.hide(0, function() {
        $(this).show();
    });
};

$(el).redraw();

Ẩn một phần tử và sau đó hiển thị lại nó trong setTimeout 0 sẽ buộc vẽ lại.

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);

Điều này dường như để làm cho tôi lừa Thêm vào đó, nó thực sự không hiển thị ở tất cả.

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);

cuộc gọi window.getComputedStyle()nên buộc một dòng chảy lại

Tôi đã gặp thử thách này ngày hôm nay trong OSX El Capitan với Chrome v51. Trang được đề cập hoạt động tốt trong Safari. Tôi đã thử gần như mọi đề xuất trên trang này - không có tác dụng nào đúng - tất cả đều có tác dụng phụ ... Tôi cuối cùng đã thực hiện mã bên dưới - siêu đơn giản - không có tác dụng phụ (vẫn hoạt động như trước trong Safari).

Giải pháp: Chuyển đổi một lớp về phần tử có vấn đề khi cần. Mỗi lần chuyển đổi sẽ buộc vẽ lại. (Tôi đã sử dụng jQuery để thuận tiện, nhưng JavaScript vanilla sẽ không có vấn đề gì ...)

Chuyển đổi lớp jQuery

$('.slide.force').toggleClass('force-redraw');

Lớp CSS

.force-redraw::before { content: "" }

Và đó là ...

LƯU Ý: Bạn phải chạy đoạn trích bên dưới "Toàn trang" để xem hiệu ứng.

$(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>

function resizeWindow(){
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt); 
}

gọi hàm này sau 500 mili giây.

Nếu bạn muốn giữ các kiểu được khai báo trong biểu định kiểu của mình, tốt hơn là sử dụng một cái gì đó như:

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: với bộ webkit / nháy mới nhất, việc lưu trữ giá trị offsetHeightlà bắt buộc để kích hoạt việc sơn lại, nếu không VM (cho mục đích tối ưu hóa) có thể sẽ bỏ qua hướng dẫn đó.

Cập nhật: đã thêm lần offsetHeightđọc thứ hai , cần ngăn trình duyệt xếp hàng / lưu vào bộ đệm một thay đổi thuộc tính / lớp CSS sau với khôi phục displaygiá trị (theo cách này có thể chuyển đổi CSS có thể theo sau)

Mẫu 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

    };

chức năng gọi:

$('article.child').redraw(); // <== ý tưởng tồi

$('#parent').redraw();

Một cách tiếp cận hiệu quả với tôi trên IE (Tôi không thể sử dụng kỹ thuật hiển thị vì có một đầu vào không được mất tiêu điểm)

Nó hoạt động nếu bạn có 0 lề (thay đổi phần đệm cũng hoạt động)

if(div.style.marginLeft == '0px'){
    div.style.marginLeft = '';
    div.style.marginRight = '0px';
} else {
    div.style.marginLeft = '0px';
    div.style.marginRight = '';
}

Chỉ CSS. Điều này hoạt động cho các tình huống trong đó một phần tử con được loại bỏ hoặc thêm vào. Trong những tình huống này, đường viền và góc tròn có thể để lại hiện vật.

el:after { content: " "; }
el:before { content: " "; }

Bản sửa lỗi của tôi cho IE10 + IE11. Về cơ bản những gì xảy ra là bạn thêm một DIV trong một phần tử gói phải được tính toán lại. Sau đó, chỉ cần loại bỏ nó và thì đấy; hoạt động như một bùa mê :)

    _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();
    },

Hầu hết các câu trả lời yêu cầu sử dụng thời gian chờ không đồng bộ, gây ra nháy mắt khó chịu.

Nhưng tôi đã đưa ra cái này, nó hoạt động trơn tru vì nó đồng bộ:

var p = el.parentNode,
    s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);

Đây là giải pháp của tôi đã làm việc để biến mất nội dung ...

<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>

Tôi gặp phải một vấn đề tương tự và dòng JS đơn giản này đã giúp khắc phục nó:

document.getElementsByTagName('body')[0].focus();

Trong trường hợp của tôi, đó là một lỗi với tiện ích mở rộng Chrome không vẽ lại trang sau khi thay đổi CSS từ bên trong tiện ích mở rộng.

Tôi muốn trả lại tất cả các trạng thái về trạng thái trước đó (không tải lại) bao gồm các yếu tố được thêm bởi jquery. Việc thực hiện ở trên sẽ không hoạt động. và tôi đã làm như sau.

// Set initial HTML description
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.body.innerHTML;
}
// Restore HTML description to initial state
function HTMLRestore() {
  document.body.innerHTML = defaultHTML;
}



DefaultSave()
<input type="button" value="Restore" onclick="HTMLRestore()">

Tôi đã có một danh sách thành phần phản ứng mà khi cuộn, sau đó mở một trang khác, sau đó khi quay lại danh sách không được hiển thị trên Safari iOS cho đến khi cuộn trang. Vì vậy, đây là sửa chữa.

    componentDidMount() {
        setTimeout(() => {
            window.scrollBy(0, 0);
        }, 300);
    }

Dưới đây css hoạt động với tôi trên IE 11 và Edge, không cần sử dụng JS. scaleY(1)lừa ở đây Có vẻ là giải pháp đơn giản nhất.

.box {
    max-height: 360px;
    transition: all 0.3s ease-out;
    transform: scaleY(1);
}
.box.collapse {
    max-height: 0;
}

Nó đã giúp đỡ tôi

domNodeToRerender.style.opacity = 0.99;
setTimeout(() => { domNodeToRerender.style.opacity = '' }, 0);

2020: Nhẹ hơn và mạnh hơn

Các giải pháp trước đây không còn hiệu quả với tôi nữa.

Tôi đoán các trình duyệt tối ưu hóa quá trình vẽ bằng cách phát hiện ngày càng nhiều thay đổi "vô dụng".

Giải pháp này làm cho trình duyệt vẽ một bản sao để thay thế phần tử ban đầu. Nó hoạt động và có lẽ bền vững hơn:

const element = document.querySelector('selector');
if (element ) {
  const clone = element.cloneNode(true);
  element.replaceWith(clone);
}

đã thử nghiệm trên Chrome 80 / Edge 80 / Firefox 75