3

I know that setting the style properties causes browser reflows . Is it possible that browser reflow also happens while accessing layout properties .If yes can you please give a specific example why that would cause a browser reflow ?

Geek
  • 26,489
  • 43
  • 149
  • 227
  • This is anecdotal, but I've seen Chrome reflow elements when merely trying to inspect an element in Dev Tools. Even if the inspected element was nowhere near/related to the element which got reflowed. – DCoder Sep 14 '12 at 10:13
  • possible duplicate of [When does reflow happen in a DOM environment?](http://stackoverflow.com/questions/510213/when-does-reflow-happen-in-a-dom-environment) or [which DOM element properties can cause the browser to perform a reflow operation](http://stackoverflow.com/q/11616619/1048572) – Bergi Sep 14 '12 at 10:43
  • What exactly do you mean by "layout properties"? – Bergi Sep 14 '12 at 10:46
  • @Bergi layout properties as in [this site](http://reference.sitepoint.com/css/layout) – Geek Sep 14 '12 at 11:11
  • OK. No, getting css style properties (not their computed values) never causes a reflow – Bergi Sep 14 '12 at 11:15
  • @Bergi can you explain in an answer then why would getting computed values case style overflow ? – Geek Sep 14 '12 at 11:17
  • @Geek: It could flush the waiting-reflows-queue. See the questions I've linked as duplicates and my discussion with Abraham below for details. – Bergi Sep 14 '12 at 11:52
  • @bergi . thanks for those links although I do not think that the question is duplicate. However they were useful and I get the idea. – Geek Sep 14 '12 at 12:06

4 Answers4

3

Of course it depends on implementation, but generally a browser triggers a reflow upon reading an element's property if it thinks that layout data needs to be re-queried (i.e. some layout-related properties on this element or any parent element changed).

You can find a list of affected properties for WebKit here: How (not) to trigger a layout in WebKit. A more general article with examples: Rendering: repaint, reflow/relayout, restyle

Dmitry Pashkevich
  • 13,431
  • 9
  • 55
  • 73
0

Getting properties might(see below) but changing properties will. Style related properties like ele.width for instances. Location properties such as an src of an iframe or img tag, will.

Also note, attaching event listeners(on*=..., addEventListener(*,...), etc) causes a reflow. This is due to the way events capture going from the outter most parent element to the src element, and bubble out from the src element through the parent element chain.

More over, modern browsers(chrome for example) delay updating the GUI unless the specified page is viewed. This causes reflows when the page becomes active again due to the browser making sure it's correctly displaying the page. This delay/queue can make getting properties appear as though they are causing a reflow when, it is in fact, the browser making sure it's displaying correctly

SReject
  • 3,774
  • 1
  • 25
  • 41
  • Could you explain why an event listener would cause a reflow? I can't really believe that. – Bergi Sep 14 '12 at 10:45
  • 1
    Dependant upon browser, when an event listener is attached, the browser moves from the outter most element inward to the element in question(EIQ). as it does so, the browser needs tocheck positioning, widths, etc, are being displayed correctly so events such as hover, click, select, etc fire as they are supposed to. I can't really explain the reason, but an example is on click for an EIQ w/ rounded corners. The event shouldn't fire if where the corner(that has been rounded off) would normally be is clicked. – SReject Sep 14 '12 at 17:20
0

If you aren't changing a CSS property, only accessing it, then no, the page will not need to be rerendered.

Abraham
  • 20,316
  • 7
  • 33
  • 39
  • There are many non-css properties that will cause a reflow, and there are even some css properties that don't. – Bergi Sep 14 '12 at 10:48
  • Well, I meant not changing the property as in getting the value only. I know setting properties often causes reflow. – Abraham Sep 14 '12 at 10:50
  • Oh, sure, getting css styles will never cause a reflow. But getting computed styles can do. – Bergi Sep 14 '12 at 10:56
  • Even if you're not changing any values? – Abraham Sep 14 '12 at 10:57
  • In modern browsers, at least - they have a reflow queue instead of processing the whole algorithm each time something is changed - and before getting computed layout values, they will need to flush that queue. – Bergi Sep 14 '12 at 11:04
0

I know this is late to the game, and it answers in a way that you can find if you read the links others have posted already, but it deserves to be stated explicitly here:

The browser is tasked with giving you the current value, so as a general rule it is going to reflow and repaint in order to make sure what you have is what the value is right now. I find it helps to think of it this way - ANY TIME you ask for a position or size of ANY ELEMENT on the page, you can assume you're going to cause a reflow/repaint. No, it's not 100% always true, but it's close enough to 100% that you should just assume if you're asking for top, left, bottom, right, height, width, or anything that affects those measurements (like scale, roation, etc), you're going to cause an R/R. That's about as specific an answer as I can give you.

Again, this is not 100% true at all times, but I find if you think of it that way it'll help in the 98% of times that it is true, and won't hurt as much for the other 2% as it helps for the 98.

borbulon
  • 1,391
  • 1
  • 11
  • 11