Bagaimana saya bisa memaksa WebKit untuk menggambar ulang / mengecat ulang untuk menyebarkan perubahan gaya?

247

Saya punya beberapa JavaScript yang sepele untuk melakukan perubahan gaya:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

Ini berfungsi baik dengan versi terbaru FF, Opera dan IE, tetapi gagal pada versi terbaru Chrome dan Safari.

Itu mempengaruhi dua keturunan, yang kebetulan adalah saudara kandung. Saudara pertama memperbarui, tetapi yang kedua tidak. Anak dari elemen kedua juga memiliki fokus dan berisi tag <a> yang berisi kode di atas dalam atribut onclick .

Dalam “Developer Tools” jendela Chrome jika saya menyenggol (misalnya hapus centang & cek) setiap atribut setiap elemen, update saudara kedua dengan gaya yang benar.

Apakah ada solusi untuk dengan mudah dan terprogram "menyenggol" WebKit agar melakukan hal yang benar?

css google-chrome safari webkit danorton
sumber

Saya pikir saya mengalami masalah ini pada Android 4.2.2 (Samsung I9500) ketika membungkus aplikasi kanvas saya di WebView. Konyol!

Josh

3

what-forces-layout.md tempat membaca yang sangat bagus

vsync

312

Saya menemukan beberapa saran rumit dan banyak yang sederhana yang tidak berhasil, tetapi komentar kepada salah satu dari mereka oleh Vasil Dinkov memberikan solusi sederhana untuk memaksa redraw / pengecatan ulang yang berfungsi dengan baik:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

Saya akan membiarkan orang lain berkomentar jika itu berfungsi untuk gaya selain "blok".

Terima kasih, Vasil!

danorton
sumber

32

Untuk menghindari kerlipan Anda dapat mencoba 'inline-block', 'table'atau 'run-in'bukannya 'none', tetapi ini mungkin memiliki efek samping. Juga, batas waktu 0 memicu reflow seperti halnya kueri offsetHeight:sel.style.display = 'run-in'; setTimeout(function () { sel.style.display = 'block'; }, 0);

user123444555621

15

Jawaban ini masih berguna 2 tahun kemudian. Saya hanya menggunakannya untuk memperbaiki masalah Chrome-only di mana bayangan kotak CSS tetap di layar setelah mengubah ukuran browser dengan cara tertentu. Terima kasih!

rkulla

5

@danorton Anda menjawab pada 2010. Ini 2013 dan bug masih ada. Terima kasih. Ngomong-ngomong, ada yang tahu jika ada masalah yang terdaftar di pelacak webkit?

RaphaelDDL

13

PS .: bagi saya solusi di atas tidak berfungsi lagi. Sebagai gantinya saya menggunakan ini (jQuery): sel.hide (). Show (0); Sumber: stackoverflow.com/questions/8840580/…

ProblemsOfSumit

7

Yang perlu Anda lakukan adalah membaca properti ukuran, Anda tidak perlu mengubahnya bolak-balik.

Andrew Bullock

93

Kami baru-baru ini menemukan ini dan menemukan bahwa mempromosikan elemen yang terpengaruh ke lapisan komposit dengan translateZ di CSS memperbaiki masalah tanpa memerlukan JavaScript tambahan.

.willnotrender { 
   transform: translateZ(0); 
}

Karena masalah melukis ini sebagian besar muncul di Webkit / Blink, dan perbaikan ini sebagian besar menargetkan Webkit / Blink, dalam beberapa kasus lebih baik. Terutama karena jawaban yang diterima hampir pasti menyebabkan reflow dan pengecatan ulang , bukan hanya pengecatan ulang.

Webkit dan Blink telah bekerja keras untuk menghasilkan kinerja, dan jenis gangguan ini adalah efek samping yang disayangkan dari optimasi yang bertujuan untuk mengurangi aliran dan cat yang tidak perlu. CSS akan berubah atau spesifikasi berikutnya yang berhasil akan menjadi solusi di masa depan, kemungkinan besar.

Ada cara lain untuk mencapai lapisan komposit, tetapi ini adalah yang paling umum.

lebih buruk
sumber

1

Bekerja untuk saya saat menggunakan angular-carousel !

gustavohenke

1

Memperbaiki masalah saya di mana radius batas hilang dalam elemen di dalam panel geser

Timo

1

Bekerja untuk proyek-proyek cordova juga!

Quispie

1

Bekerja untuk saya untuk -webkit-line-clamp yang tidak menyegarkan

Adam Marshall

1

Bekerja untuk saya di ipad (6.0) dengan -webkit-transform: translate (-50%, -50%).

Lain

51

solusi danorton tidak bekerja untuk saya. Saya punya beberapa masalah aneh di mana webkit tidak akan menggambar beberapa elemen sama sekali; di mana teks dalam input tidak diperbarui hingga onur; dan mengubah className tidak akan menghasilkan redraw.

Solusi saya, saya tidak sengaja temukan, adalah menambahkan elemen gaya kosong ke tubuh, setelah skrip.

<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...

Itu memperbaikinya. Seberapa aneh itu? Semoga ini bermanfaat bagi seseorang.

Gerben
sumber

3

Saya akan menang 1.000.000 kali jika saya bisa. Ini adalah satu-satunya cara saya bisa mendapatkan chrome untuk mengecat div bodoh yang saya seret. Ngomong-ngomong, Anda tidak perlu menambahkan elemen gaya (setidaknya saya tidak) elemen apa pun akan berfungsi. Saya membuat div dan memberikannya id sehingga saya bisa menghapus kemudian menambahkan elemen pada setiap langkah, agar tidak mengisi DOM dengan tag yang tidak berguna.

hobberwickey

6

hanya menggunakan ini dicampur dengan komentar Pumbaa80 pada jawaban lain. Perbaikan saya berakhir dengan adalahvar div = $('<div>').appendTo(element); setTimeout(function(){ div.remove(); }, 0);

bendman

33

Baris ini bekerja sangat baik untuk saya! $('<style></style>').appendTo($(document.body)).remove();

pdelanauze

1

@pdelanauze jawaban berfungsi dengan sempurna. Saya memiliki masalah redraw sing css3 translate and transform in ios.

Marcel Falliere

11

Ketahuilah bahwa ini memaksa pengecatan ulang seluruh halaman, sedangkan sebagian besar waktu Anda hanya ingin mengecat ulang bagian tertentu dari halaman ...

Ryan Wheale

33

Karena tampilan + pemicu offset tidak berfungsi untuk saya, saya menemukan solusi di sini:

http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

yaitu

element.style.webkitTransform = 'scale(1)';

EricG
sumber

3

Saya menggunakan ini dalam retas yang saya coba, tetapi alih-alih scale(1), saya menugaskannya sebagai element.style.webkitTransform = element.style.webkitTransform. Alasan untuk ini adalah bahwa pengaturan itu ke yang pertama adalah mendistorsi halaman sedikit untuk absoluteelemen yang diposisikan!

bPratik

Ini bekerja untuk saya, dan tidak memiliki masalah berkedip atau mengatur ulang posisi gulir yang dilakukan displaysolusinya.

davidtbernal

Saya punya aplikasi Cordova menggunakan banyak SVG dinamis. Bekerja dengan baik di mana saja kecuali iOS7, di mana jika tidak akan menampilkan elemen SVG saat startup. Menambahkan $ ('tubuh') sederhana [0] .style.webkitTransform = 'skala (1)'; ke kode inisialisasi dan masalahnya hilang!

Herc

Ini tidak berfungsi sampai sekarang, di Safari dan iOS terbaru.

setholopolus

@setholopolus versoin mana?

EricG

23

Saya menderita masalah yang sama. Perbaikan toggling display danorton bekerja untuk saya ketika ditambahkan ke fungsi langkah animasi saya, tetapi saya khawatir tentang kinerja dan saya mencari opsi lain.

Dalam keadaan saya, elemen yang tidak dicat ulang berada dalam elemen posisi absolut yang pada saat itu tidak memiliki indeks-z. Menambahkan z-index ke elemen ini mengubah perilaku Chrome dan repaints terjadi seperti yang diharapkan -> animasi menjadi lancar.

Saya ragu bahwa ini adalah obat mujarab, saya bayangkan itu tergantung mengapa Chrome memilih untuk tidak menggambar ulang elemen tersebut tetapi saya memposting solusi khusus ini di sini dalam bantuan yang diharapkan seseorang.

Ceria, Rob

tl; dr >> Cobalah menambahkan indeks-z ke elemen atau induknya.

Rob Murphy
sumber

8

Cemerlang. Ini luar biasa dan memperbaiki masalah bagi saya. A +++ akan z-indeks lagi.

trisweb

Tidak bekerja dalam situasi saya berurusan dengan scroll-bar dan transformasi.

Ricky Boyce

16

Pekerjaan berikut. Hanya perlu diatur sekali dalam CSS murni. Dan itu berfungsi lebih andal daripada fungsi JS. Performa tampaknya tidak terpengaruh.

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }

sweed
sumber

Sepertinya itu bekerja untukku juga. Menggunakan ini untuk memperbaiki masalah rendering dengan Mobile Safari

Chris

Ini memperbaiki masalah saya, memaksa safari untuk keluar. Namun, saya menggunakan zoombukannya padding:@-webkit-keyframes safariBugFix {from { zoom: 100%; } to { zoom: 99.99999%; }}

Ahmed Musallam

13

Untuk beberapa alasan saya tidak bisa mendapatkan jawaban danorton untuk bekerja, saya bisa melihat apa yang seharusnya dilakukan, jadi saya mengubah sedikit ini:

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');

dan itu berhasil untuk saya.

sowasred2012
sumber

7

Saya mencoba semuanya di atas ini, tetapi hanya yang ini berhasil untuk saya. Webkit WTF! Ini bukan ilmu komputer! Ini adalah ilmu hitam!

Charlie Martin

7

Saya datang ke sini karena saya perlu menggambar ulang scrollbar di Chrome setelah mengubah css-nya.

Jika seseorang memiliki masalah yang sama, saya menyelesaikannya dengan memanggil fungsi ini:

//Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

Metode ini bukan solusi terbaik, tetapi dapat bekerja dengan segalanya, menyembunyikan dan menunjukkan elemen yang perlu digambar ulang dapat menyelesaikan setiap masalah.

Ini biola tempat saya menggunakannya: http://jsfiddle.net/promatik/wZwJz/18/

António Almeida
sumber

1

Bagus! Saya juga mencoba menghidupkan scrollbar dan itulah yang saya butuhkan! Btw lebih baik menggunakan overflow: overlay untuk scrollbar animasi

ekalchev

6

Saya menemukan ini hari ini: Element.redraw () untuk prototype.js

Menggunakan:

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

Namun, saya terkadang memperhatikan bahwa Anda harus memanggil redraw () pada elemen yang bermasalah secara langsung. Terkadang menggambar ulang elemen induk tidak akan menyelesaikan masalah yang dialami anak.

Artikel bagus tentang cara browser merender elemen: Rendering: repaint, reflow / relayout, restyle

Adam Eberlin
sumber

1

appendChildadalah metode DOM, bukan metode jQuery.

ChrisW

4

Saya punya masalah dengan sejumlah div yang dimasukkan ke div lain dengan position: absolute, div yang dimasukkan tidak memiliki atribut posisi. Ketika saya mengubah ini untuk position:relativeitu berfungsi dengan baik. (Sangat sulit untuk menentukan masalah)

Dalam kasus saya elemen mana yang dimasukkan oleh Angular dengan ng-repeat.

JustGoscha
sumber

1

Terima kasih! Ini berhasil untuk masalah saya juga, dan jauh lebih ringan daripada banyak solusi javascript di atas.

Dsyko

4

Saya tidak percaya ini masih menjadi masalah di tahun 2014. Saya baru saja mengalami masalah ini ketika menyegarkan kotak teks posisi tetap di bagian kiri bawah halaman saat menggulir, keterangannya akan 'hantu' naik ke atas layar. Setelah mencoba semuanya di atas tanpa hasil, saya perhatikan banyak hal yang lambat / menyebabkan masalah karena membuat relayOM DOM yang sangat singkat dll menyebabkan perasaan agak tidak wajar menggulung dll ...

Saya akhirnya membuat posisi tetap, div ukuran penuh dengan pointer-events: nonedan menerapkan jawaban danorton untuk elemen itu, yang tampaknya memaksa redraw pada seluruh layar tanpa mengganggu DOM.

HTML:

<div id="redraw-fix"></div>

CSS:

div#redraw-fix {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    pointer-events: none;
    display: block;
}

JS:

sel = document.getElementById('redraw-fix');
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

wafel
sumber

Saya tidak bisa cukup berterima kasih atas solusi Anda yang merupakan satu-satunya yang bekerja untuk saya. Ya, ini 2017 dan masalah ini tetap ada. Masalah saya terkait dengan halaman bahasa RTL yang akan kosong jika secara manual di-refresh pada perangkat seluler Android. The z-indexdan pointer-eventsaturan-aturan yang berlebihan di sini.

Amin Mozafari

Saya telah menggunakan perbaikan danorton sebelumnya tetapi benar-benar berjuang dengan flash konten dari pengaturan tampilan menjadi tidak ada. Solusi Anda berhasil bagi saya tanpa flash konten!

Justin Noel

3

Bukannya pertanyaan ini membutuhkan jawaban lain, tetapi saya menemukan hanya mengubah warna dengan sedikit memaksa pengecatan ulang dalam situasi khusus saya.

//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';

//Change back to black
setTimeout(function() {
    elem.style.color = '#000000';
}, 0);

The setTimeoutterbukti penting untuk memindahkan perubahan gaya kedua di luar acara loop arus.

TMan
sumber

1

Mengatur batas waktu 0 terbukti bermanfaat bagi saya dalam situasi yang berbeda tetapi serupa. Redraw tidak terjadi sebelum validasi jquery membeku di layar sementara parsed bentuk besar. Kupikir aku akan berkomentar jika seseorang di luar sana dalam situasi yang sama. Solusi lain tidak berfungsi dalam skenario ini.

k29

2

Satu-satunya solusi yang berfungsi untuk saya mirip dengan jawaban sowasred2012:

$('body').css('display', 'table').height();
$('body').css('display', 'block');

Saya memiliki banyak blok masalah di halaman, jadi saya mengubah displayproperti elemen root. Dan saya menggunakan display: table;sebagai gantinya display: none;, karena noneakan mengatur ulang gulir offset.

Ilya Sviridenko
sumber

2

Saya menggunakan transform: translateZ(0);metode ini tetapi dalam beberapa kasus tidak cukup.

Saya bukan penggemar menambahkan dan menghapus kelas jadi saya mencoba mencari cara untuk menyelesaikan ini dan berakhir dengan peretasan baru yang bekerja dengan baik:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Guillaume Gautier
sumber

1

Karena semua orang tampaknya memiliki masalah dan solusi mereka sendiri, saya pikir saya akan menambahkan sesuatu yang berfungsi untuk saya. Di Android 4.1 dengan Chrome saat ini, mencoba menyeret kanvas di dalam div dengan overflow: disembunyikan, saya tidak bisa mendapatkan redraw kecuali saya menambahkan elemen ke div induk (di mana itu tidak akan membahayakan).

var parelt = document.getElementById("parentid");
var remElt = document.getElementById("removeMe");
var addElt = document.createElement("div");
addElt.innerHTML = " "; // Won't work if empty
addElt.id="removeMe";
if (remElt) {
    parelt.replaceChild(addElt, remElt);
} else {
    parelt.appendChild(addElt);
}

Tidak ada layar berkedip atau pembaruan nyata, dan membersihkan setelah saya sendiri. Tidak ada variabel cakupan kelas atau global, hanya lokal. Sepertinya tidak menyakiti apa pun di Mobile Safari / iPad atau browser desktop.

Eric Ruck
sumber

1

Saya bekerja pada aplikasi ionic html5, pada beberapa layar saya telah absolutememposisikan elemen, ketika gulir ke atas atau ke bawah di perangkat iOS (iPhone 4,5,6, 6+) saya memiliki bug repaint.

Mencoba banyak solusi tidak satupun dari mereka bekerja kecuali yang satu ini menyelesaikan masalah saya.

Saya telah menggunakan kelas css .fixRepaintpada elemen posisi absolut itu

.fixRepaint{
    transform: translateZ(0);
}

Ini telah memperbaiki masalah saya, mungkin bisa membantu seseorang

Anjum ....
sumber

1

Opss beberapa bagaimana saya belum melihatnya. @morewry Terima kasih telah menunjukkan

Anjum ....

0

Ini bagus untuk JS

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

Tetapi dalam Jquery, dan terutama ketika Anda hanya dapat menggunakan $ (dokumen). Sudah dan tidak dapat mengikat ke acara .load objek karena alasan tertentu, berikut ini akan berfungsi.

Anda perlu mendapatkan wadah OUTER (PALING) dari objek / divs dan kemudian menghapus semua isinya ke dalam variabel, kemudian menambahkannya kembali. Ini akan membuat SEMUA perubahan dilakukan dalam wadah luar yang terlihat.

$(document).ready(function(){
    applyStyling(object);
    var node = $("div#body div.centerContainer form div.centerHorizontal").parent().parent();
    var content = node.html();
    node.html("");
    node.html(content);
}

WiR3D
sumber

0

Saya menemukan metode ini berguna ketika bekerja dengan transisi

$element[0].style.display = 'table'; 
$element[0].offsetWidth; // force reflow
$element.one($.support.transition.end, function () { 
    $element[0].style.display = 'block'; 
});

jschr
sumber

0

retasan "display / offsetHeight" tidak berfungsi dalam kasus saya, setidaknya saat diterapkan pada elemen yang dianimasikan.

saya memiliki menu dropdown yang sedang dibuka / ditutup atas konten halaman. artefak dibiarkan pada konten halaman setelah menu ditutup (hanya di browser webkit). satu-satunya cara hack "display / offsetHeight" bekerja adalah jika saya menerapkannya pada tubuh, yang tampaknya jahat.

Namun, saya memang menemukan solusi lain:

sebelum elemen mulai dianimasikan, tambahkan kelas yang mendefinisikan "-webkit-backface-visibility: hidden;" pada elemen (Anda juga bisa menggunakan gaya inline, saya kira)
setelah selesai menghidupkan, hapus kelas (atau gaya)

ini masih cukup hacky (menggunakan properti CSS3 untuk memaksa rendering perangkat keras), tetapi setidaknya itu hanya mempengaruhi elemen yang dimaksud, dan bekerja untuk saya pada safari dan chrome pada PC dan Mac.

tedtedson
sumber

0

Ini sepertinya terkait dengan ini: gaya jQuery tidak diterapkan di Safari

Solusi yang disarankan dalam respons pertama telah bekerja dengan baik untuk saya dalam skenario ini, yaitu: menerapkan dan menghapus kelas dummy ke tubuh setelah melakukan perubahan gaya:

$('body').addClass('dummyclass').removeClass('dummyclass');

Ini memaksa safari untuk menggambar ulang.

steve
sumber

Agar ini berfungsi di Chrome, saya harus menambahkan: $ ('body'). AddClass ('dummyclass'). Delay (0) .removeClass ('dummyclass');

mbokil

0

saran di atas tidak berhasil untuk saya. tetapi yang di bawah tidak.

Ingin mengubah teks di dalam jangkar secara dinamis. Kata "Cari". Membuat "tag" tag dalam dengan atribut id. Konten yang dikelola menggunakan javascript (di bawah)

Cari

isi skrip:

    var searchText = "Search";
    var editSearchText = "Edit Search";
    var currentSearchText = searchText;

    function doSearch() {
        if (currentSearchText == searchText) {
            $('#pSearch').panel('close');
            currentSearchText = editSearchText;
        } else if (currentSearchText == editSearchText) {
            $('#pSearch').panel('open');
            currentSearchText = searchText;
        }
        $('#searchtxt').text(currentSearchText);
    }

Ganesh
sumber

0

Saya mengalami masalah dengan SVG yang menghilang di Chrome untuk Android ketika orientasi diubah dalam keadaan tertentu. Kode di bawah ini tidak mereproduksinya, tetapi pengaturan yang kami miliki.

body {
  font-family: tahoma, sans-serif;
  font-size: 12px;
  margin: 10px;
}
article {
  display: flex;
}
aside {
  flex: 0 1 10px;
  margin-right: 10px;
  min-width: 10px;
  position: relative;
}
svg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.backgroundStop1 {
  stop-color: #5bb79e;
}
.backgroundStop2 {
  stop-color: #ddcb3f;
}
.backgroundStop3 {
  stop-color: #cf6b19;
}

<article>
  <aside>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
      <defs>
        <linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1">
          <stop class="backgroundStop1" offset="0%"></stop>
          <stop class="backgroundStop2" offset="50%"></stop>
          <stop class="backgroundStop3" offset="100%"></stop>
        </linearGradient>
      </defs>
      <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect>
    </svg>
  </aside>
  <section>
    <p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum
      urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p>
    <p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p>
  </section>
</article>

Luaskan cuplikan

Setengah hari kemudian setelah menyodok dan mendorong dan tidak senang dengan solusi peretasan yang ditawarkan di sini, saya menemukan bahwa masalah ini disebabkan oleh fakta bahwa elemen tersebut tetap tersimpan dalam ingatan saat menggambar yang baru. Solusinya adalah membuat ID linearGradient pada SVG unik, meskipun hanya pernah digunakan sekali per halaman.

Ini dapat dicapai dengan berbagai cara, tetapi untuk aplikasi sudut kami, kami menggunakan fungsi lodash uniqueId untuk menambahkan variabel ke ruang lingkup:

Petunjuk Sudut (JS):

scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');

Pembaruan HTML:

Baris 5: <linearGradient ng-attr-id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">

Baris 11: <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng-attr-fill="url(#{{indicatorColourPatternId}})"/>

Saya harap jawaban ini menyelamatkan seseorang dari hari-hari dengan menghancurkan keyboard mereka.

Jamie Barker
sumber

0

Saya akan merekomendasikan cara yang kurang resmi dan lebih formal untuk memaksa reflow: use forceDOMReflowJS . Dalam kasus Anda, kode Anda akan terlihat sebagai berikut.

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;

Jack Giffin
sumber

0

Saya menemukan bahwa hanya menambahkan gaya konten ke elemen memaksanya untuk mengecat ulang, ini harus menjadi nilai yang berbeda setiap kali Anda ingin menggambar ulang dan tidak perlu menggunakan elemen pseudo.

.selector {
    content: '1'
}

Steve
sumber

0

Saya mencoba jawaban yang lebih sederhana tetapi tidak berhasil untuk saya. Saya mengalami masalah untuk memiliki clientWidth yang sama dengan safari dibandingkan dengan browser lain dan kode ini memecahkan masalah:

var get_safe_value = function(elm,callback){
    var sty = elm.style
    sty.transform = "translateZ(1px)";
    var ret = callback(elm)//you can get here the value you want
    sty.transform = "";
    return ret
}
// for safari to have the good clientWidth
var $fBody = document.body //the element you need to fix
var clientW = get_safe_value($fBody,function(elm){return $fBody.clientWidth})

Ini benar-benar aneh karena jika saya mencoba lagi untuk mendapatkan clientWidth setelah get_safe_value, saya mendapatkan nilai buruk dengan safari, pengambil harus antara sty.transform = "translateZ(1px)"; dansty.transform = "";

Solusi lain yang bekerja secara definitif adalah

var $fBody = document.body //the element you need to fix
$fBody.style.display = 'none';
var temp = $.body.offsetHeight;
$fBody.style.display = ""
temp = $.body.offsetHeight;

var clientW = $fBody.clientWidth

Masalahnya adalah Anda kehilangan fokus dan status gulir.

bormat
sumber

0

Ini akan memaksa pengecatan ulang sambil menghindari kerlap-kerlip, mengutak-atik elemen yang ada dan masalah tata letak ...

function forceRepaint() {
    requestAnimationFrame(()=>{
      const e=document.createElement('DIV');
      e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
               pointer-events:none;z-index:9999999';
      document.body.appendChild(e);
      requestAnimationFrame(()=>e.remove());  
    });
}

pengguna2026189
sumber

-1

Solusi sederhana dengan jquery:

$el.html($el.html());

atau

element.innerHTML = element.innerHTML;

Memiliki SVG yang tidak ditampilkan ketika ditambahkan ke html.

Ini dapat ditambahkan setelah elemen svg ada di layar.

Solusi yang lebih baik adalah dengan menggunakan:

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

dan dengan jQuery:

$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));

ini akan ditampilkan dengan benar di Chrome.

Yaron Shamir
sumber

Masalah dengan pendekatan ini adalah bahwa Anda kehilangan penangan acara yang telah Anda daftarkan pada objek atau turunannya.

Haqa

Bagaimana saya bisa memaksa WebKit untuk menggambar ulang / mengecat ulang untuk menyebarkan perubahan gaya?

Jawaban: