Stack Overflow
Stack Overflow

Questions tagged [reflow]

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.

Reflow is the process by which web browsers will "re-flow" the contents of an HTML document to accomodate for element size or window size changes.

Reflow is similar to 'repaint' but differs as a repaint event affects visual display elements (visibility, background-color, etc...) but don't cause the browser to reflow the contents of the rest of the document (position, width, height, padding, etc...).

Questions about reflow will typically relate to browser performance as well as cross-browser behavior with relation to re-drawing document contents.

For more information:

166 questions
83
votes
5 answers

What's the difference between reflow and repaint?

I'm a little unclear on the difference between reflow + repaint (if there's any difference at all) Seems like reflow might be shifting the position of various DOM elements, where repaint is just rendering a new object. E.g. reflow would occur when…
Jon Raasch
  • 3,133
  • 5
  • 28
  • 32
74
votes
3 answers

What is DOM reflow?

I was reading about the difference between two CSS properties display:none and visibility:hidden and encountered the DOM reflow term. The statement was display: none causes a DOM reflow whereas visibility: hidden does not. So my question is: What…
Suresh Karia
  • 14,742
  • 18
  • 63
  • 83
51
votes
3 answers

When does reflow happen in a DOM environment?

What kinds of activities will trigger reflow of web page with DOM? It seems there are different points of view. According to http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/, it happens When you add or remove a DOM…
Morgan Cheng
  • 66,562
  • 63
  • 166
  • 223
41
votes
1 answer

Reflowing comment blocks with vim

I'm cleaning up someone else's code and working with vim. I'd like to reflow the comments so that they're formatted consistently. For example: # one two three four five six seven # eight nine # ten eleven twelve thirteen fourteen #…
oalders
  • 5,099
  • 2
  • 19
  • 34
40
votes
2 answers

Styled-Components vs SASS (SCSS) or LESS

I came across a ReactJS Boilerplate which had good reps and is community driven. Styling section emphasized more on styled component CSS but never stopped from switching to conventional CSS styling methodologies. Although this pulled my interests…
Nirus
  • 3,078
  • 2
  • 18
  • 42
29
votes
2 answers

Force browser to trigger reflow while changing CSS

I am building non-jQuery responsive image slider based on CSS3 transitions. The structure is simple: a viewport and inside relatively positioned UL with left floated LIs. I am facing a problem in such situation: User clicks "prev" arrow. JS appends…
Simon
  • 471
  • 1
  • 4
  • 11
26
votes
2 answers

Control and measure precisely how long an image is displayed

For a reaction time study (see also this question if you're interested) we want to control and measure the display time of images. We'd like to account for the time needed to repaint on different users' machines. Edit: Originally, I used only inline…
Ruben
  • 3,242
  • 27
  • 42
21
votes
8 answers

Is there a way to detect horizontal scroll only without triggering a browser reflow

You can detect a browser scroll event on an arbitrary element with: element.addEventListener('scroll', function (event) { // do something }); I would like to be able to differentiate between vertical scrolling and horizontal scrolling and…
magritte
  • 6,801
  • 8
  • 52
  • 78
17
votes
2 answers

How can I force reflow after DHTML change in IE7?

I have a page where the user can dynamically add file upload boxes. Adding the boxes changes the height of the div they are in, but certain elements of the div below it stay in the same place, so they start to overlap with the new DOM…
Freewalker
  • 3,608
  • 1
  • 30
  • 52
13
votes
2 answers

Is there a way in Javascript to time a browser reflow?

I need to be able to benchmark a particular build of a webkit-based browser and am measuring the length of time it takes to do certain stuff like DOM manipulation, memory limits etc. I have a test below which records the length of time it takes to…
giles
  • 624
  • 1
  • 8
  • 21
12
votes
2 answers

HTML like layouting

I'm trying to implement my own little flow-based layout engine. It should imitate the behavior of HTML layouting, but only the render-tree, not the DOM part. The base class for elements in the render-tree is the Node class. It has: A link to the…
Niklas R
  • 14,369
  • 23
  • 82
  • 179
11
votes
1 answer

Why does ie apparently reflow DOM when encountering fbml elements when correctly using the fbml xmlns?

I have a page containing a number of facebook "Like" buttons, embedded using the inline fbml technique (as opposed to iframe). Simple enough. The page renders fine, everything works as expected. HOWEVER... Once I add the…
Bernos
  • 111
  • 6
9
votes
3 answers

What is causing this long delay when I clear a form input (in chrome)?

Summary Clearing the text in a form input is causing a long delay (multiple seconds) in Chrome. It seems that this is causing a reflow or recalculation of computed styles, but I'm not sure. Chrome's Profiler and Timeline were uninformative. What is…
jmilloy
  • 6,690
  • 7
  • 46
  • 79
9
votes
1 answer

How many Reflows does attaching a DocumentFragment Cause?

Using DocumentFramgment allows us to attach DOM elements to each other without causing a browser reflow (i.e. work with offline DOM trees). A lot of libraries like jQuery use document fragments to improve performance. The document fragment can have…
Benjamin Gruenbaum
  • 246,787
  • 79
  • 474
  • 476
8
votes
1 answer

cssText or individual stylename?

When we are applying a lot of style changes using JavaScript to a single element, phpied & Writing Efficient JavaScript (slide 87) suggests: instead of applying styles one by one using style.stylename, apply everything in one go using cssText or…
Anish
  • 1,064
  • 4
  • 13
  • 25
1
2 3
…
11 12