ক্রোম / ম্যাকের উপর ডিওএম পুনরায় আঁকা / রিফ্রেশ করার জন্য বাধ্য করুন


215

প্রতি একবারে একবারে, ক্রোম পুরোপুরি বৈধ এইচটিএমএল / সিএসএসকে ভুলভাবে দেয় বা একেবারেই দেয় না। ডিওএম ইন্সপেক্টরের মাধ্যমে খনন করা প্রায়শই এটির উপায়গুলির ত্রুটিটি উপলব্ধি করতে এবং সঠিকভাবে পুনরায় আঁকার জন্য যথেষ্ট হয়, সুতরাং এটি সম্ভবত প্রমাণযোগ্যভাবে দেখা যায় যে মার্কআপটি ভাল। এটি এমন একটি প্রকল্পে প্রায়শই ঘন ঘন ঘটে (এবং অনুমানযোগ্য) যা আমি কাজ করছি তাতে আমি নির্দিষ্ট পরিস্থিতিতে একটি পুনর্নির্মাণকে বাধ্য করার জন্য কোড রেখেছি।

এটি বেশিরভাগ ব্রাউজার / ওএস সংমিশ্রণে কাজ করে:

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

হিসাবে, কিছু অব্যবহৃত সিএসএস সম্পত্তি চিহ্নিত করুন, তারপরে এমন কিছু তথ্যের জন্য জিজ্ঞাসা করুন যা একটি পুনরায় চিত্র আঁকতে বাধ্য করে, তারপরে সম্পত্তিটি অন্বেষণ করুন। দুর্ভাগ্যক্রমে, ম্যাকের জন্য ক্রোমের পিছনে উজ্জ্বল দল মনে হয় যে পুনরায় আঁকানো ছাড়াই সেই অফসেটহাইট পাওয়ার কোনও উপায় খুঁজে পেয়েছে। সুতরাং একটি অন্যথায় দরকারী হ্যাক হত্যা।

এখনও অবধি, আমি ক্রোম / ম্যাকের উপর একই প্রভাব পেতে সেরাটি নিয়ে এসেছি এটি এই কদর্যতা:

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

হিসাবে, আসলে উপাদানটি কিছুটা লাফিয়ে পড়তে বাধ্য করুন, তারপরে একটি সেকেন্ডে ঠাণ্ডা করুন এবং এটিকে আবার লাফ দিন। এটিকে আরও খারাপ করে তোলা, যদি আপনি সেই সময়সীমাটি 500 মিমি নীচে ফেলে রাখেন (যেখানে এটি কম লক্ষণীয় হবে), এটির প্রায়শই পছন্দসই প্রভাব থাকে না, যেহেতু ব্রাউজারটি তার আসল অবস্থায় ফিরে যাওয়ার আগে পুনরায় চিত্র আঁকতে পারে না।

ক্রোম / ম্যাক এ কাজ করে এমন কারও এই পুনঃনির্মাণ / রিফ্রেশ হ্যাকের (সর্বোপরি উপরের প্রথম উদাহরণের উপর ভিত্তি করে) আরও ভাল সংস্করণ সরবরাহ করার কোনও যত্ন নেই?


আমি কয়েক মিনিট আগে একই সমস্যায় পড়েছিলাম। আমি ডিভের জন্য উপাদানটি পরিবর্তন করি (এটি একটি স্প্যান ছিল) এবং এখন ব্রাউজারটি পরিবর্তনগুলি সঠিকভাবে রেড করে। আমি জানি এটি কিছুটা পুরানো তবে এটি কিছু ব্রোসকে সেখানে সাহায্য করতে পারে বলে আমি মনে করি।
আন্দ্রে টরেস

2
দয়া করে নীচের উত্তরটি অস্বচ্ছতা 0.99 সম্পর্কিত দেখুন - এখানে সেরা উত্তর - তবে পৃষ্ঠায় এত গভীর হওয়ায় এটি খুঁজে পাওয়া সহজ নয়।
গ্রুপাল

1
এটি লিনাক্সেও ঘটে :-(
schlingel

1
আপনি একটি অনুরোধের সাথে টাইমআউটটি প্রতিস্থাপন করতে পারেনএনিমেশনফ্রেম, এক্ষেত্রে আপনি একই জিনিসটি অর্জন করতে পারবেন তবে 1000ms এর পরিবর্তে 16 মিমি পিছনে।
trusktr

3
অবৈধ রেন্ডারিংয়ের জন্য দয়া করে একটি ক্রোমিয়াম সমস্যা ফাইল করুন । দেখা যাচ্ছে যে 4 বছর আগে হওয়া সত্ত্বেও কেউ তা করেনি।
বার্দি হার্বো

উত্তর:


183

আপনি ঠিক কী অর্জন করতে চাইছেন তা নিশ্চিত নন তবে এটি একটি পদ্ধতি যা আমি অতীতে সাফল্যের সাথে ব্রাউজারকে পুনরায় আঁকতে বাধ্য করতে ব্যবহার করেছি, সম্ভবত এটি আপনার পক্ষে কাজ করবে।

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

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

যদি এই সাধারণ পুনরায় আঁকা কাজ না করে তবে আপনি এটি ব্যবহার করে দেখতে পারেন। এটি উপাদানটিতে একটি খালি পাঠ নোড সন্নিবেশ করায় যা একটি পুনরায় আঁকার গ্যারান্টি দেয়।

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
}

সম্পাদনা: Vidime বিদাসের প্রতিক্রিয়া হিসাবে আমরা এখানে কী অর্জন করছি তা বাধ্যতামূলকভাবে প্রত্যাবর্তন হবে। আপনি মাস্টার নিজে থেকে আরও জানতে পারেন http://paulirish.com/2011/dom-html5-css3-performance/


3
আফাইক, ভিউপোর্টের কেবলমাত্র একটি অংশ পুনরায় আঁকানো সম্ভব নয়। ব্রাউজারটি সর্বদা পুরো ওয়েব পৃষ্ঠাটি পুনরায় আঁকায়।
Vidime Vidas

38
এর পরিবর্তে $ ('# প্যারেন্টঅফলেমেন্টটোবেড্রেডন') hide লুকান ()। প্রদর্শন (); Chrome এ সঠিকভাবে কাজ করার জন্য আমার .hide.show (0) দরকার ছিল
l.poellabauer

1
@ l.poellabauer এখানে একই - এটি কোনও মানে করে না ... তবে ধন্যবাদ। আপনি কিভাবে হ্যাক খুঁজে পেল ??? :)
জনআইডল

6
এফওয়াইআই, যে অঞ্চলে আমি কাজ করছিলাম তা হ'ল অসীম স্ক্রোলের তালিকা। তা আড়াল করার একটি বিট অকার্যকর ছিল /, সমগ্র উল দেন তাই আমি প্রায় অভিনয় এবং দেখা গেছে যে যদি আপনি না .hide().show(0)উপর কোন উপাদান (আমি পৃষ্ঠার পাদলেখ বেছে নেওয়া হয়েছে) এটি পৃষ্ঠাটি রিফ্রেশ করা উচিত।
গাছের পৃষ্ঠ

1
ভিউপোর্টের কেবলমাত্র অংশ পুনরায় আঁকা সম্ভব। এটি করার জন্য কোনও এপিআই নেই, তবে ব্রাউজার এটি করতে বেছে নিতে পারে। ভিউপোর্টটি শুরু করার জন্য টাইলগুলিতে আঁকা হয়। এবং যৌগিক স্তরগুলি স্বাধীনভাবে আঁকা হয়।
15'15

62

উপরের উত্তরগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি। আমি লক্ষ্য করেছি যে আমার উইন্ডোটি পুনরায় আকার দেওয়ার ফলে একটি পুনরায় চিত্র তৈরি হয়েছিল। সুতরাং এটি আমার জন্য এটি করেছে:

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

11
ইঙ্গিত: এটি আপনার সম্পূর্ণ উইন্ডোটি পুনরায়
চিত্রায়িত

7
উইন্ডোটিকে $(window).trigger('resize')পুনরায় আকার দেওয়ার ফলে সর্বদা একটি রিফ্লো ট্রিগার হয় তবে কোডটি হয় না, এটি কেবল 'পুনরায় আকার' ইভেন্ট ছুঁড়ে দেয় যা বরাদ্দ দেওয়া থাকলে সম্পর্কিত হ্যান্ডলারটিকে ট্রিগার করে।
গ্যারি

1
তুমি আমাকে পুরো সপ্তাহ বাঁচাও! আমার সমস্যাটি <বডি স্টাইল = "জুম: 67%"> সেট করার পরে, পৃষ্ঠাটি আমার প্রত্যাশিত স্তরে জুম হয়েছে, তবে পৃষ্ঠাটি হিমায়িত হয়েছে এবং স্ক্রোল করতে পারে না। আপনার উত্তরটি এই সমস্যাটি তত্ক্ষণাত্ সমাধান করেছে
ব্যবহারকারী 1143669

30

আমরা সম্প্রতি এই সম্মুখীন হয়েছে এবং আবিষ্কার করেন যে একটি থেকে আক্রান্ত উপাদান প্রচার যৌগিক স্তর সঙ্গে translateZ অতিরিক্ত জাভাস্ক্রিপ্ট ছাড়াই সমস্যা সমাধান করা হয়েছে।

.willnotrender { 
   transform: translateZ(0); 
}

এই চিত্রকলার সমস্যাগুলি বেশিরভাগ ওয়েবকিট / ব্লিঙ্কে প্রদর্শিত হয় এবং এই ফিক্সটি বেশিরভাগ ক্ষেত্রে ওয়েবকিট / ব্লিঙ্ককে লক্ষ্য করে, এটি কিছু ক্ষেত্রে এটি পছন্দনীয়। বিশেষ করে অনেক জাভাস্ক্রিপ্ট সমাধান একটি কারণ যেহেতু রাং এবং নূতনে রঙ , শুধু একটি নূতনে রঙ।


1
ক্যানভাস অবিচ্ছিন্নভাবে অ্যানিমেটেড থাকা সত্ত্বেও ইস্যুটি একটি ক্যানভাসে মুছে ফেলা এইচটিএমএল উপাদান তৈরি করার সময় আমার পক্ষে এটি কার্যকর হয়েছিল।
Knaģis

এটি একটি লেআউট ইস্যুটি আমার সাথে ছিল তা স্থির করে neon-animated-pages। আপনাকে ধন্যবাদ: +1:
coffeesaga

1
এটি কাজ করে। সাফারি এমন উপাদানগুলিকে ছেড়ে চলে যাচ্ছিল যেখানে কোনও ডিভি সেটে কোনওটি প্রদর্শন করা যায় না, দৃশ্যমান হয় না এবং নির্বাচনযোগ্য-সক্ষম হয় না। উইন্ডোটি পুনরায় আকার দেওয়ার ফলে সেগুলি অদৃশ্য হয়ে গেল। এই রূপান্তরটি যুক্ত করার ফলে প্রত্যাশার সাথে "শিল্পকলাগুলি" অদৃশ্য হয়ে গেল।
জেফ ম্যাটসন

28

সময়সীমা ছাড়াই এই সমাধান! রিয়েল ফোর্স রিড্রা! অ্যান্ড্রয়েড এবং আইওএসের জন্য।

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

1
এটি আমার জন্য ক্রোম বা লিনাক্সে এফএফের জন্য কাজ করে না। তবে কেবলমাত্র উপাদান.অফসেটহাইট অ্যাক্সেস করা (প্রদর্শন সম্পত্তিটি পরিবর্তন না করে ) কাজ করে। এটি উপাদানটি দৃশ্যমান না হলে ব্রাউজারটি অফসেটহাইট গণনাটি এড়িয়ে যাবে।
গ্রোড্রিগেজ

"ওভারল্ফ" -তে ব্যবহৃত ক্রোম-ভিত্তিক ব্রাউজারে আমি যে বাগটি সম্মুখীন হয়েছিল তার চারপাশে কাজ করার জন্য এই সমাধানটি পুরোপুরি কাজ করে। আমি কীভাবে এটি করব তা বোঝার চেষ্টা করছিলাম এবং আপনি আমার প্রচেষ্টাটি সংরক্ষণ করেছিলেন।
ন্যাসিটার সেবাদত

13

এটি আমার পক্ষে কাজ করে। কুডোস এখানে যান

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

$(el).redraw();

1
তবে এটি কিছু 'অবশেষ' যেমন 'প্রদর্শন: ব্লক' ইত্যাদি ছেড়ে গেছে যা কখনও কখনও পৃষ্ঠার কাঠামোকে ধ্বংস করতে পারে।
পাই 6 কে 9

এটি মূলত সমান হওয়া উচিত$().hide().show(0)
মাহন

@ মাহান আপনি কি চেষ্টা করেছেন? আমার অনুমানে। হাইড () অ-ব্লক করে চলেছে সুতরাং এটি ব্রাউজারে পুনরায় রেন্ডারিং রানটি পুরো পদ্ধতিটির পুরো বিন্দুটি এড়িয়ে যাবে। (এবং যদি আমি সঠিকভাবে মনে করি তবে আমি এটি আবার পরীক্ষা করেছি।)
zupa

2
@zupa এটা পরীক্ষিত হচ্ছে এবং Chrome 38. কাজ কৌতুক যে show()থেকে ভিন্ন show(0), এটা বরং যে অবিলম্বে যা সময় দেয় একই ভাবে যে রেন্ডার করার জন্য একটি সময় সমাপ্ততে jQuery এর অ্যানিমেশন পদ্ধতি দ্বারা আলোড়ন সৃষ্টি হচ্ছে আধুনিক একটি সময়কাল নির্দিষ্ট করে যে hide(0, function() { $(this).show(); })আছে ।
মাহন

@ মাহনা ঠিক আছে তাহলে ধরা পড়ল। আমি অবশ্যই আপনার সমাধানের জন্য এটি যদি ক্রস প্ল্যাটফর্মটি কাজ করে এবং সাম্প্রতিক jQuery বৈশিষ্ট্যটি না থেকে থাকে। আমার এটি পরীক্ষার সময় না থাকায় আমি এটি 'কাজ করতে পারে' হিসাবে যুক্ত করব। আপনি যদি উপরের প্রয়োগটি মনে করেন তবে উত্তরটি সম্পাদনা করতে আপনাকে স্বাগতম।
zupa

9

কোনও উপাদান লুকিয়ে রাখা এবং তারপরে 0 এর সেটটাইমআউটের মধ্যে আবার দেখানো পুনরায় আঁকতে বাধ্য করবে।

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

1
এটি একটি Chrome বাগের জন্য কাজ করেছিল যেখানে এসভিজি ফিল্টারগুলি কখনও কখনও পুনরায় রঙ করে না, বাগগুলি gs chromium.org/p/chromium/issues/detail?id=231560 । সময়সীমা গুরুত্বপূর্ণ ছিল।
জেসন ডি

এটিই হ'ল ক্রোমকে মূল্যায়নগুলির জন্য পুনরায় myElement.getBoundingClientRect()গণনা করার জন্য ক্রোমকে বাধ্য করার চেষ্টা করার সময় , যেগুলি ক্যাশে করা হয়েছিল, সম্ভবত অপটিমাইজেশন / পারফরম্যান্সের উদ্দেশ্যেই কাজ করেছিল। আমি ফাংশনটির জন্য কেবল একটি শূন্য মিলিসেকেন্ড সময়সীমা যুক্ত করেছি যা ডিওমে নতুন উপাদান যুক্ত করে এবং ডিওএম থেকে পূর্ববর্তী (ক্যাশেড) মানগুলি সহ পুরানো উপাদানটি সরিয়ে দেওয়ার পরে নতুন মানগুলি পেয়ে যায়।
TheDarkIn1978

6

এটি আমার জন্য কৌশলটি বলে মনে হচ্ছে। এছাড়াও, এটি আসলে দেখা যায় না।

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

এটা তোলে এই বাগ সংক্রান্ত Chromium সংস্করণ 60.0.3112.113 আমার পক্ষে কাজ: ইস্যু 727076 । দক্ষ এবং সূক্ষ্ম; অনেক ধন্যবাদ.
লনি সেরা

@ wiktus239 হতে পারে ২০ মিলিস খুব দ্রুত এবং ব্রাউজারের .99 এ পরিবর্তনের সময় নেই, আগে 1.0 এ ফিরে যাওয়ার আগে? - এই অস্বচ্ছতা ট্রিকটি আইফোন আইওএস 12 সাফারিতে কোনও আইফ্রেমে সামগ্রী দৃশ্যমান করার জন্য, আমার পক্ষে যাইহোক কাজ করে এবং আমি প্রতি 1 000 মিলি টগল করি। উপরের মন্তব্যে (1000 মিলিস) 727076 লিঙ্কযুক্ত ইস্যুতে এটিই রয়েছে That's
কাজম্যাগনুস

4

কল window.getComputedStyle()একটি রিফ্লো জোর করা উচিত


2
আমার পক্ষে কাজ করেনি, তবে এটি সম্ভবত কারণ আমার এমন offsetHeightসম্পত্তির প্রয়োজন ছিল যা CSS নয়।
সেবাস

3

আমি আজ ChromeX55 সহ ওএসএক্স এল ক্যাপিটেনে এই চ্যালেঞ্জের মধ্যে দিয়েছি। প্রশ্নযুক্ত পৃষ্ঠাটি সাফারিতে দুর্দান্ত কাজ করেছে। আমি এই পৃষ্ঠায় প্রায় প্রতিটি পরামর্শ দিয়েছি - কোনওটিই সঠিক হয়নি - সবারই পার্শ্ব প্রতিক্রিয়া ছিল ... আমি নীচের কোডটি প্রয়োগ করে শেষ করেছি - সুপার সিম্পল - কোনও পার্শ্ব প্রতিক্রিয়া নেই (এখনও সাফারি হিসাবে আগের মতো কাজ করে)।

সমাধান: সমস্যাযুক্ত উপাদানটির প্রয়োজন অনুসারে একটি শ্রেণিতে টগল করুন। প্রতিটি টগল একটি পুনরায় চিত্র আঁকতে বাধ্য করবে। (আমি সুবিধার জন্য jQuery ব্যবহার করেছি, তবে ভ্যানিলা জাভাস্ক্রিপ্ট কোনও সমস্যা হওয়া উচিত ...)

jQuery ক্লাস টগল

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

সিএসএস ক্লাস

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

এবং এটাই...

দ্রষ্টব্য: প্রভাবটি দেখতে আপনাকে "সম্পূর্ণ পৃষ্ঠা" এর নীচে স্নিপেট চালাতে হবে।

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


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

500 মিলিসেকেন্ডের পরে এই ফাংশনটি কল করুন।


2

আপনি যদি আপনার স্টাইলশীটে ঘোষিত শৈলীগুলি সংরক্ষণ করতে চান তবে এর মতো কিছু ব্যবহার করা ভাল better

jQuery.fn.redraw = function() {
    this.css('display', 'none'); 
    var temp = this[0].offsetHeight;
    this.css('display', '');
    temp = this[0].offsetHeight;
};

$('.layer-to-repaint').redraw();

নোট: সর্বশেষতম ওয়েবকিট / পলক সহ, offsetHeightপুনঃনির্মাণটি ট্রিগার করার জন্য মান সংরক্ষণ করা বাধ্যতামূলক, অন্যথায় ভিএম (অপ্টিমাইজেশনের উদ্দেশ্যে) সম্ভবত সেই নির্দেশনা এড়িয়ে যাবে।

আপডেট: দ্বিতীয় offsetHeightপঠন যোগ করা হয়েছে , displayমূল্য পুনরুদ্ধারের সাথে নিম্নলিখিত সিএসএস সম্পত্তি / শ্রেণিবিন্যাসকে কুইলিং / ক্যাচিং থেকে ব্রাউজারকে আটকাতে হবে (এই পদ্ধতিতে সিএসএস রূপান্তর যা অনুসরণ করতে পারে তা রেন্ডার করা উচিত)


1

নমুনা এইচটিএমএল:

<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

    };

কল ফাংশন:

$('article.child').redraw(); // <== খারাপ ধারণা

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

এছাড়াও আমার .fadeIn(1)পরিবর্তে কাজ করে .show(300)- উপাদানটিকে চারপাশে ঠেলে না। সুতরাং আমার ধারণা, এটি ট্রিগার display:noneএবং ফিরেblock
বনানাএসিড 1

0

IE এ আমার জন্য কাজ করে এমন একটি পদ্ধতির (আমি প্রদর্শন কৌশলটি ব্যবহার করতে পারি না কারণ এমন কোনও ইনপুট ছিল যা ফোকাসটি notিলে করতে হবে না)

আপনার 0 টি মার্জিন থাকলে এটি কাজ করে (প্যাডিং পরিবর্তনও কাজ করে)

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

0

কেবল সিএসএস। এটি এমন পরিস্থিতিতে কাজ করে যেখানে কোনও শিশু উপাদান সরানো বা যুক্ত করা হয়। এই পরিস্থিতিতে, সীমানা এবং বৃত্তাকার কোণগুলি শিল্পকর্মগুলি ছেড়ে যেতে পারে।

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

0

আইই 10 + আই 11 এর জন্য আমার ফিক্স। মূলত যা হয় তা হ'ল আপনি একটি মোড়ানো উপাদানটির মধ্যে একটি ডিআইভি যুক্ত করেন যা পুনরায় গণনা করতে হয়। তারপরে এটি সরান এবং ভয়েলা; একটি যাদুমন্ত্র মত কাজ করে :)

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

0

বেশিরভাগ উত্তরের জন্য একটি অ্যাসিনক্রোনাস টাইমআউট ব্যবহার করা প্রয়োজন, যা বিরক্তিকর পলকের কারণ হয়।

তবে আমি এটিকে নিয়ে এসেছি, যা সুসংগতভাবে কাজ করে কারণ এটি সংক্রামিত:

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

এই উপাদানগুলির সাথে কোনও সংযুক্ত ইভেন্টগুলি কি এখনও কাজ করবে?
কেরি জনসন

0

এটি আমার সমাধান যা সামগ্রীর অন্তর্ধানের জন্য কাজ করেছে ...

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

0

আমি একটি অনুরূপ ইস্যুতে দৌড়েছি এবং জেএসের এই সাধারণ লাইনটি এটি ঠিক করতে সহায়তা করেছিল:

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

আমার ক্ষেত্রে এটি একটি ক্রোম এক্সটেনশান সহ একটি বাগ ছিল যা এক্সটেনশানের মধ্যে থেকে সিএসএস পরিবর্তন করার পরে পৃষ্ঠাটি পুনরায় আঁকেনি।


4
এটি কীবোর্ড অ্যাক্সেসযোগ্যতা বিরতি।
পঙ্গম্মা

0

আমি জেকুরিতে যুক্ত উপাদানগুলি সহ সমস্ত রাজ্যকে পূর্বের অবস্থায় (পুনরায় লোড না করে) ফিরিয়ে দিতে চেয়েছিলাম। উপরোক্ত বাস্তবায়ন কাজ করে না। এবং আমি নিম্নলিখিত হিসাবে করেছি।

// 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()">

0

আমার একটি প্রতিক্রিয়াযুক্ত উপাদান তালিকা ছিল যা স্ক্রোল করার পরে, অন্য পৃষ্ঠাটি খুলবে, তারপরে তালিকাটি ফিরে আসার পরে পৃষ্ঠাটি স্ক্রোল না হওয়া পর্যন্ত সাফারি আইওএসে রেন্ডার করা হয়নি। সুতরাং এটি ঠিক করা।

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

0

CSS এর নীচে আইই 11 এবং এজতে আমার জন্য কাজ করে, কোনও জেএসের প্রয়োজন নেই। scaleY(1)কৌশল এখানে। সহজ সমাধান মনে হচ্ছে।

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


0

2020: হালকা এবং শক্তিশালী

পূর্ববর্তী সমাধানগুলি আমার পক্ষে আর কাজ করে না।

আমার ধারণা ব্রাউজারগুলি अधिकाधिक "অকেজো" পরিবর্তনগুলি সনাক্ত করে অঙ্কন প্রক্রিয়াটি অনুকূলিত করে।

এই সমাধানটি ব্রাউজারটিকে আসল উপাদানটি প্রতিস্থাপন করতে একটি ক্লোন আঁকতে সক্ষম করে। এটি কাজ করে এবং সম্ভবত আরও টেকসই:

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

ক্রোম 80 / এজ 80 / ফায়ারফক্স 75 এ পরীক্ষিত

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.