i have one-page mobile site i'm working on brings loading widget comes between page navigation. on old android phones (i'm testing on galaxy s), painting loading icon deferred until of other processing done. of course largely defeats purpose of loading icon.
$("button").click(function() { $(".cover").show(); $(window).scrolltop(0); for(var = 0; < 1000; i++) { console.log($(".body").css("width")); } settimeout(function() { $(".body").toggleclass("toggle"); $(".cover").hide(); }, 1000); }); this sample code accurately demonstrates functionally happening on site. there command display loading widget, relatively heavy processing (of course on actual page, it's variety of different things, both demo , page behave same way). when press button on galaxy s, there bunch of processing, loading widget appears 1 second timeout.
why doesn't show loading widget display first , how can force to?
here jsbin demo can see on phone: jsbin
if let event loop finish, browser draw. can this:
$("button").click(function() { $(".cover").show(); $(window).scrolltop(0); settimeout(function() { for(var = 0; < 1000; i++) { console.log($(".body").css("width")); } settimeout(function() { $(".body").toggleclass("toggle"); $(".cover").hide(); }, 1000); }, 1); }); there other ways force specific browsers repaint, you'd have test ones work in specific cases. here other references other methods:
force dom redraw/refresh on chrome/mac
how can force webkit redraw/repaint propagate style changes?
force repaint of element javascript
force redraw on element jquery
as why not same in every browser, that's because there no universal standards when browser repaint pending changes other when browser gets event loop. so, given browser implementation if paint while javascript still running (before current js thread of execution finishes) or whether wait until js done. work-arounds above exploit observed behaviors create work-arounds rather trigger documented, standards-defined behaviors.
Comments
Post a Comment