1

I've found if I have an element of display: none and I set it to "block", many browsers will have a slight delay before the element has an actual size console.log(element.offsetWidth === 0).

I've always created an interval or timeout checked that keeps polling until it has a size. But this is a hack.

Is there an actual event or some way to tell the browser to do something only when it has finished giving it display and layout?

Don Rhummy
  • 24,730
  • 42
  • 175
  • 330
  • 2
    Does this resolve your issue ? http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery – mguimard Aug 05 '16 at 12:23
  • 1
    works for me: https://jsfiddle.net/grfsf6mb/1/ – Roland Starke Aug 05 '16 at 12:26
  • The element should be re-rendered on the next tick. For information on how to force a re-render, see http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes. –  Aug 05 '16 at 12:30
  • @torazaburo take a look at https://gist.github.com/paulirish/5d52fb081b3570c81e3a accessing certain style attributes is synchronous (including `offsetWidth` so there should not be a need to use setTimeout). – Roland Starke Aug 05 '16 at 12:46
  • 1
    @mguimard No. That event has been deprecated and is being removed from browsers: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events – Don Rhummy Aug 05 '16 at 12:59
  • @RolandStarke in some versions of IE and Firefox, I have found that an immediate check can sometimes return 0 unless you do a setTimeout – Don Rhummy Aug 05 '16 at 13:00

0 Answers0