WebKit'i stil değişikliklerini yaymak için yeniden çizmeye / yeniden boyamaya nasıl zorlayabilirim?

247

Bir stil değişikliği etkilemek için bazı önemsiz JavaScript var:

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

Bu, FF, Opera ve IE'nin en son sürümleriyle iyi çalışır, ancak Chrome ve Safari'nin en son sürümlerinde başarısız olur.

Kardeş olan iki torunu etkiler. İlk kardeş güncellenir, ikincisi güncellenmez. İkinci öğenin alt öğesi de odağa sahiptir ve bir onclick özniteliğinde yukarıdaki kodu içeren <a> etiketini içerir .

Chrome “Geliştirici Araçları” penceresinde , herhangi bir öğenin herhangi bir özelliğini düzeltirsem (ör. İşaretini kaldır & işaretle) , ikinci kardeş doğru stile güncellenir.

WebKit'i kolayca ve programlı olarak doğru şeyi yapmaya itmenin bir yolu var mı?

css  google-chrome  safari  webkit 
— danorton
kaynak
Tuval uygulamamı bir WebView'de kaydırırken Android 4.2.2'de (Samsung I9500) bu sorunu yaşadığımı düşünüyorum. Saçma!
— Josh
3
what-forces-layout.md çok iyi bir okuma yeri
— vsync

Yanıtlar:

312

Bazı karmaşık öneriler ve işe yaramayan birçok basit öneri buldum, ancak Vasil Dinkov'un birisine yaptığı yorum, iyi çalışan bir yeniden çizme / boyamayı zorlamak için basit bir çözüm sağladı:

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

"Engelleme" dışındaki stiller için işe yararsa başka birinin yorum yapmasına izin vereceğim.

Teşekkürler Vasil!

— danorton
kaynak
32
Eğer deneyebilirsiniz titreyen önlemek için 'inline-block', 'table'ya da 'run-in'yerine 'none', ancak bu yan etkileri olabilir. Ayrıca, 0 zaman aşımı sorgulama gibi bir yeniden akış tetikler offsetHeight:sel.style.display = 'run-in'; setTimeout(function () { sel.style.display = 'block'; }, 0);
— user123444555621
15
Bu cevap 2 yıl sonra hala faydalıdır. Tarayıcıyı belirli şekillerde yeniden boyutlandırdıktan sonra CSS kutusu gölgelerinin ekranda kalmasıyla ilgili yalnızca Chrome'daki bir sorunu düzeltmek için kullandım. Teşekkürler!
— rkulla
5
@danorton 2010 yılında cevap verdiniz. 2013 ve hata hala ortalıkta. Teşekkürler. Bu arada, webkit tracker'da kayıtlı herhangi bir sorun olup olmadığını bilen var mı?
— RaphaelDDL
13
PS .: benim için yukarıdaki çözüm artık işe yaramadı. Bunun yerine bunu (jQuery) kullandım: sel.hide (). Show (0); Kaynak: stackoverflow.com/questions/8840580/…
— ProblemsOfSumit
7
Tek yapmanız gereken bir boyut özelliği okumaktır, ileri geri değiştirmeniz gerekmez.
— Andrew Bullock
93

Kısa bir süre önce bununla karşılaştık ve etkilenen öğeyi CSS'de translateZ ile kompozit bir katmana yükseltmenin, fazladan JavaScript'e gerek kalmadan sorunu çözdüğünü keşfettik .

.willnotrender { 
   transform: translateZ(0); 
}

Bu boyama sorunları çoğunlukla Webkit / Blink'te göründüğünden ve bu düzeltme çoğunlukla Webkit / Blink'i hedeflediğinden, bazı durumlarda tercih edilir. Kabul cevabı neredeyse kesin bir neden Özellikle de , yeniden düzenleme ve rötuş , değil sadece yeniden boyamaya olduğu için.

Webkit ve Blink, performans oluşturma konusunda çok çalışıyorlar ve bu tür aksaklıklar, gereksiz akışları ve boyaları azaltmayı amaçlayan optimizasyonların talihsiz yan etkisi. CSS değişecek ya da başarılı bir başka özellik, büyük olasılıkla gelecekteki çözüm olacaktır.

Kompozit bir katman elde etmenin başka yolları da vardır, ancak bu en yaygın olanıdır.

— morewry
kaynak
1
Açısal karusel kullanırken benim için çalıştı !
— gustavohenke
1
Kayar panel içindeki bir öğede sınır yarıçapının kaybolduğu sorunum düzeltildi
— Timo
1
Kordova projeleri için de çalışıyor!
— Quispie
1
Yenilememiş bir -webkit-line-kelepçe için benim için çalıştı
— Adam Marshall
1
Benim için -webkit-transform: translate (-50%, -50%) ile ipad (6.0) üzerinde çalıştı.
— Lain
51

danorton çözümü benim için çalışmadı. Webkit'in bazı öğeler çizmeyeceği bazı garip sorunlar yaşadım; girişlerdeki metin onblur'a kadar güncellenmedi; ve className öğesinin değiştirilmesi bir yeniden çizimle sonuçlanmaz.

Yanlışlıkla keşfettiğim çözümüm, senaryodan sonra vücuda boş bir stil öğesi eklemekti.

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

Bunu düzelttim. Bu ne kadar garip? Umarım bu birisi için yararlıdır.

— Gerben
kaynak
3
Mümkünse 1.000.000 kez varabilirdim. Bu, kromun sürüklediğim aptal bir div'ı yeniden boyamasını sağlamanın tek yoludur. Bu arada, herhangi bir elemanın çalışacağı bir stil öğesi (en azından ben yapmadım) eklemek zorunda değilsiniz. Bir div yaptım ve bir kimlik verdim, böylece DOM'u yararsız etiketlerle doldurmamak için her adımda öğeyi ekleyebilirim.
— hobberwickey
6
sadece Pumbaa80'in başka bir cevabın yorumuyla karıştırdı. Ben sona erdi düzeltmevar div = $('<div>').appendTo(element); setTimeout(function(){ div.remove(); }, 0);
— bendman
33
Bu tek satır benim için harika çalışıyor! $('<style></style>').appendTo($(document.body)).remove();
— pdelanauze
1
@pdelanauze cevap mükemmel çalışıyor. Ben craw3 şarkı ve ios dönüştürmek bir redraw sorun var.
— Marcel Falliere
11
Sadece bunun tüm sayfanın yeniden
— boyamasını zorladığını bilin
33

Ekran + ofset tetikleyicisi benim için çalışmadığından, burada bir çözüm buldum:

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

yani

element.style.webkitTransform = 'scale(1)';
— EricG
kaynak
3
Bunu denediğim bir hackte kullandım, ama bunun yerine scale(1)kendime atadım element.style.webkitTransform = element.style.webkitTransform. Bunun birincisi olarak ayarlanmasının nedeni, yalnızca absolutekonumlandırılmış öğeler için sayfayı biraz bozmaktır!
— bPratik
Bu benim için çalıştı ve displayçözümün yaptığı kaydırma konumunu titretme veya sıfırlama konusunda sorun yaşamadım.
— davidtbernal
Çok sayıda dinamik SVG kullanan bir Cordova uygulamam vardı. Başlangıçta SVG öğelerini göstermezse, iOS7 dışında her yerde iyi çalıştı. Basit bir $ ('body') [0] .style.webkitTransform = 'scale (1)' eklendi; başlatma kodu sorun ve sorun kayboldu!
— Herc
Bu şu an itibariyle, en yeni Safari ve iOS'ta çalışmıyor.
— setholopolus
@setholopolus hangi versoin (ler) olurdu?
— EricG
23

Aynı sorunu yaşıyordum. danorton'un 'geçiş ekranı' düzeltmesi, animasyonumun adım işlevine eklendiğinde benim için çalıştı, ancak performans konusunda endişeliydim ve diğer seçenekleri aradım.

Benim durumumda, yeniden boyamayan eleman, o zamanlar bir z-endeksine sahip olmayan kesinlikle bir konum elementi içerisindeydi. Bu öğeye bir z-endeksi eklemek Chrome'un davranışını değiştirdi ve boyamalar beklendiği gibi oldu -> animasyonlar düzgünleşti.

Bunun her derde deva olduğundan şüpheliyim, bunun neden olduğuna bağlı olduğunu düşünüyorum Chrome'un öğeyi yeniden çizmemeyi seçtiğine ancak bu özel çözümü burada birisini umduğuna yardımcı olarak gönderiyorum.

Şerefe, Rob

tl; dr >> Elemana veya bunun bir üst öğesine bir z-endeksi eklemeyi deneyin.

— Rob Murphy
kaynak
8
Parlak. Bu harika ve benim için sorunu düzeltti. A +++ tekrar z-endeksi oluşturur.
— trisweb
Durumumda kaydırma çubukları ve dönüşümleri ile ilgili işe yaramadı.
— Ricky Boyce
16

Aşağıdaki işler. Saf CSS'de yalnızca bir kez ayarlanması gerekir. Ve bir JS işlevinden daha güvenilir çalışır. Performans bundan etkilenmez.

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }
— sweeds
kaynak
Görünüşe göre benim için de çalışıyor. Mobil Safari
— Chris
Bu benim sorunumu düzeltir, safari aktarmaya zorlar. Ancak, zoomdolgu yerine kullandım :@-webkit-keyframes safariBugFix {from { zoom: 100%; } to { zoom: 99.99999%; }}
— Ahmed Musallam
13

Herhangi bir nedenden dolayı Danimarka'nın çalışmasına cevap alamadım, ne yapması gerektiğini görebiliyordum, bu yüzden bunu biraz değiştirdim:

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

ve benim için çalıştı.

— sowasred2012
kaynak
7
Bunun üzerindeki her şeyi denedim, ama sadece bu benim için çalıştı. WTF webkit! Bu bilgisayar bilimi değil! Bu kara büyü!
— Charlie Martin
7

Buraya geldim çünkü css'sini değiştirdikten sonra Chrome'da kaydırma çubuklarını yeniden çizmem gerekiyordu.

Birisi aynı sorunu yaşıyorsa, bu işlevi çağırarak çözdüm:

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

Bu yöntem en iyi çözüm değildir, ancak her şeyle çalışabilir, yeniden çizilmesi gereken öğeyi gizlemek ve göstermek her sorunu çözebilir.

İşte kullandığım keman: http://jsfiddle.net/promatik/wZwJz/18/

— António Almeida
kaynak
1
Harika! Kaydırma çubuklarını da canlandırmaya çalışıyordum ve buna ihtiyacım vardı! BTW Daha İyi Kullanım Taşması: Animasyonlu Kaydırma
— Çubukları
6

Bugün bunun üzerine tökezledim: prototype.js için Element.redraw ()

Kullanımı: 

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

Ancak, bazen sorunlu öğede redraw () öğesini doğrudan çağırmanız gerektiğini fark ettim. Bazen üst öğenin yeniden çizilmesi, çocuğun yaşadığı sorunu çözmez.

Tarayıcıların öğeleri oluşturma şekli hakkında iyi bir makale: Rendering: repaint, reflow / relayout, restyle

— Adam Eberlin
kaynak
1
appendChildjQuery yöntemi değil, DOM yöntemidir.
— ChrisW
4

Ben başka bir div ile position: absoluteeklenen div sayısı bir dizi ile bu sorun vardı , eklenen divs konum özniteliği vardı. Bunu şu şekilde değiştirdiğimde:position:relative işe yaradı. (sorunu belirlemek gerçekten zordu)

Benim durumumda Angular ile yerleştirilen öğeler ng-repeat.

— JustGoscha
kaynak
1
Teşekkürler! Bu da benim sorunum için işe yaradı ve yukarıdaki javascript çözümlerinin birçoğundan çok daha hafif.
— Dsyko
4

2014'te bunun hala bir sorun olduğuna inanamıyorum. Kaydırma sırasında sayfanın sol alt köşesinde sabit konumlu bir altyazı kutusunu yenilerken bu sorunu yaşadım, altyazı ekranın üstündeki 'hayalet' olurdu. Yukarıdaki her şeyi başarı olmadan denedikten sonra, bir çok şeyin ya yavaş / çok kısa DOM röleleri oluşturma nedeniyle sorunlara neden olduğunu fark ettim.

Sabit bir pozisyon, tam boyutlu bir div yapmak pointer-events: noneve Danorton'un bu öğeye cevabını uygulamakla sonuçlandım.

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';
— waffl
kaynak
Benim için çalışan tek çözümünüz için size yeterince teşekkür edemem. Evet, 2017 ve sorun devam ediyor. Sorunum, Android mobil cihazlarda manuel olarak yenilenirse boş hale getirilecek bir RTL dil sayfasıyla ilgiliydi. z-indexVe pointer-eventskurallar burada gereksizdir.
— Amin Mozafari
Danorton'un düzeltmesini daha önce kullandım, ancak ekran ayarından hiçbirine içerik flaşıyla gerçekten mücadele ediyordum. Çözümünüz içerik flaşı olmadan benim için harika çalıştı!
— Justin Noel
3

Bu sorunun başka bir cevaba ihtiyacı olmadığı için değil, sadece rengi tek bir bitle değiştirmenin, özel durumumda bir boyayı zorladığını buldum.

//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);

setTimeoutGeçerli olay döngü dışında ikinci tarzı değişikliğini taşımak için kritik olduğunu kanıtladı.

— TUR
kaynak
1
0 zaman aşımı ayarlamak farklı ama benzer bir durumda benim için yararlı oldu. Yeniden çizim, jquery göze çarpmayan doğrulama büyük bir formu ayrıştırırken ekranı dondurarak gerçekleşmiyordu. Birisinin aynı durumda olması durumunda yorum yapacağımı düşündüm. Diğer çözümler bu senaryoda işe yaramadı.
— k29
2

Benim için tek çözüm sowasred2012'nin cevabına benzer:

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

Sayfada sorun blokları bir sürü var, bu yüzden displaykök öğenin özelliğini değiştirin . Ve display: table;bunun yerine kullanıyorum display: none;, çünkü nonekaydırma ofsetini sıfırlayacaktır.

— Ilya Sviridenko
kaynak
2

Kullandığım transform: translateZ(0);yöntem ancak bazı durumlarda yeterli değildir.

Ben bir sınıf ekleme ve kaldırma hayranı değilim, bu yüzden bunu çözmek için bir yol bulmaya çalıştım ve iyi çalışan yeni bir kesmek ile sona erdi:

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

// ios redraw fix
animation: redraw 1s linear infinite;
— Guillaume Gautier
kaynak
1

Herkesin kendi sorunları ve çözümleri var gibi göründüğünden, benim için çalışan bir şey ekleyeceğimi düşündüm. Mevcut Chrome ile Android 4.1'de, bir tuvali taşan bir divın içine sürüklemeye çalışıyorum: gizli, üst div'e (herhangi bir zarar vermez) bir öğe eklemezsem yeniden çizemedim.

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);
}

Ekran titremesi veya gerçek güncelleme yok ve kendimden sonra temizlik yapıyorum. Global veya sınıf kapsamındaki değişkenler yok, sadece yereller. Mobile Safari / iPad veya masaüstü tarayıcılarda hiçbir şeye zarar vermiyor gibi görünüyor.

— Eric Ruck
kaynak
1

İyonik html5 uygulaması üzerinde çalışıyorum, absoluteIOS cihazlarında (iPhone 4,5,6, 6+) yukarı veya aşağı kaydırma yaptığımda birkaç ekran i öğesi konumlandırdım, yeniden boyama hatası vardı.

Sorunumu çözmek dışında bunun dışında hiçbiri işe yaramadı birçok çözüm çalıştı.

.fixRepaintBu mutlak pozisyonlar öğeleri üzerinde css sınıfı kullanıyorum

.fixRepaint{
    transform: translateZ(0);
}

Bu sorunumu düzeltti, bazılarına yardımcı olabilir

— Anjum ....
kaynak
1
Opss bunu nasıl görmedim. @morewry İşaret ettiğiniz için teşekkürler
— Anjum ....
0

JS için bu iyi

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

Ancak Jquery'de ve özellikle yalnızca $ (document) .ready kullanabiliyorsanız ve belirli bir nedenden ötürü bir nesnenin .load olayına bağlanamadığınızda, aşağıdakiler işe yarayacaktır.

Nesnelerin / div'lerin OUTER (MOST) kapsayıcısını almanız ve ardından tüm içeriğini bir değişkene kaldırmanız ve tekrar eklemeniz gerekir. Dış kap içinde yapılan TÜM değişiklikleri görünür hale getirecektir.

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

Geçişlerle çalışırken bu yöntemi yararlı buldum

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

"display / offsetHeight" kesmek, en azından animasyonlu öğeye uygulandığında, benim durumumda çalışmadı.

sayfa içeriği üzerinde açık / kapalı olan bir açılır menü vardı. menü kapatıldıktan sonra eserler sayfa içeriğinde kalıyordu (yalnızca webkit tarayıcılarında). "display / offsetHeight" kesmek çalıştı tek yolu kötü görünüyor vücuda uyguladıysanız.

Ancak, başka bir çözüm buldum:

  1. öğe canlandırmaya başlamadan önce "-webkit-backface-visibility: hidden;" öğe üzerinde (ayrıca satır içi stilini de kullanabilirsiniz, sanırım)
  2. animasyon tamamlandığında sınıfı (veya stili) kaldırın

bu hala oldukça çirkin (donanım oluşturma işlemini zorlamak için bir CSS3 özelliği kullanıyor), ancak en azından sadece söz konusu öğeyi etkiliyor ve PC ve Mac'te hem safari hem de krom üzerinde çalıştı.

— tedtedson
kaynak
0

Bu şununla ilgili görünüyor: jQuery stili Safari'de uygulanmıyor

İlk yanıtta önerilen çözüm bu senaryolarda benim için iyi çalıştı, yani: stil değişiklikleri yaptıktan sonra vücuda bir kukla sınıf uygulayın ve kaldırın:

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

Bu safariyi yeniden çizmeye zorlar.

— steve
kaynak
Bunu Chrome'da çalıştırabilmek için şunu eklemek zorundaydım: $ ('body'). AddClass ('dummyclass'). Delay (0) .removeClass ('dummyclass');
— mbokil
0

yukarıdaki öneriler benim için işe yaramadı. ama aşağıda.

Çapanın içindeki metni dinamik olarak değiştirmek istiyorum. Kelime "Ara". İd özelliğine sahip bir iç "font" etiketi oluşturuldu. Javascript kullanarak içeriği yönetti (aşağıda)

Arama

script içeriği:

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

Belirli durumlarda yön değiştirildiğinde Android için Chrome'da kaybolan bir SVG ile ilgili sorun yaşıyordum. Aşağıdaki kod yeniden üretmez, ancak sahip olduğumuz kurulumdur.

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>
Snippet'i genişlet

Gün ve yarım gün sonra alay ve prodding ve burada sunulan çılgın çözümler memnun değil sonra , sorunun yeni bir çizim yaparken öğeyi hafızada tutmak gibi görünüyordu neden olduğunu keşfettim. Çözüm, sayfa başına yalnızca bir kez kullanılmasına rağmen SVG üzerindeki linearGradient kimliğini benzersiz kılmaktı.

Bu birçok farklı yolla elde edilebilir, ancak açısal uygulamamız için kapsama bir değişken eklemek için lodash uniqueId işlevini kullandık:

Açısal Yönerge (JS):

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

HTML Güncellemeleri:

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

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

Umarım bu cevap, bir başkasını klavyesini yüz smashing değerinde kurtarır.

— Jamie Barker
kaynak
0

Bir yeniden akış zorlamak için daha az hackish ve daha resmi bir yol tavsiye ederim: forceDOMReflowJS kullanın . Sizin durumunuzda, kodunuz aşağıdaki gibi görünecektir.

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;
— Jack Giffin
kaynak
0

Öğeye sadece bir içerik stili eklemenin onu yeniden boyamaya zorladığını, her yeniden çizilmesini istediğinizde farklı bir değer olması gerektiğini ve sahte bir öğe üzerinde olması gerekmediğini buldum.

.selector {
    content: '1'
}
— Steve
kaynak
0

Morewry cevabını denedim ama benim için işe yaramıyor. Diğer tarayıcılara kıyasla safari ile aynı clientWidth sahip sorun vardı ve bu kod sorunu çözdü:

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

Gerçekten garip çünkü get_safe_value'dan sonra clientWidth'i tekrar denersem, safari ile kötü bir değer elde ederim, alıcı arasında sty.transform = "translateZ(1px)"; vesty.transform = "";

Kesin olarak çalışan diğer çözüm

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

Sorun, odak ve kaydırma durumlarını kaybetmenizdir.

— bormat
kaynak
0

Bu, titremeyi, mevcut eleman tamirini ve herhangi bir düzen sorununu önlerken yeniden boyamaya zorlar ...

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());  
    });
}
— user2026189
kaynak
-1

Jquery ile basit bir çözüm:

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

veya 

element.innerHTML = element.innerHTML;

HTML'ye eklendiğinde gösterilmeyen bir SVG vardı.

Bu, svg öğeleri ekrana geldikten sonra eklenebilir.

Daha iyi bir çözüm kullanmaktır:

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

ve jQuery ile:

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

bu Chrome'da doğru şekilde oluşturulur.

— Yaron Shamir
kaynak
Bu yaklaşımla ilgili sorun, nesneye veya neslinin üzerine kaydettiğiniz tüm olay işleyicilerini kaybetmenizdir.
— Hakka
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.