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:

171 questions
9
votes
3 answers

How to listen for layout changes on a specific HTML element?

What are some techniques for listening for layout changes in modern browsers? window.resize won't work because it only fires when the entire window is resized, not when content changes cause reflow. Specifically, I'd like to know when: An element's…
Chris Calo
  • 7,518
  • 7
  • 48
  • 64
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,164
  • 4
  • 15
  • 27
7
votes
5 answers

Possible to have a dynamically height adjusted textarea without constant reflows?

Note: This is not a duplicate as far as I can tell, as using a contentEditable div doesn't seem to be a good alternative. It has numerous problems (no placeholder text, need to use the dangerouslySetInnerHTML hack to update text, selection cursor is…
Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
7
votes
1 answer

Is it possible to access the current scaling factor of a %-width element by Javascript without causing reflow?

I'm trying to fix some slow-performing javascript in a sluggish UI, and I've narrowed the main cause down to a jQuery .width() call used to see the actual pixel size of a width: 100% element in a responsive layout, in a process that needs to happen…
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
7
votes
0 answers

Why does .find()-ing child nodes with specific parents (or descendants) with jQuery cause DOM changes?

Using Chrome's dev tools, I have come to understand that a flashing node in the dev tools is because of a change in the DOM. Does that also lead to a reflow? There seems to be a functional difference between the following despite the results…
Joe Shanahan
  • 816
  • 5
  • 21
7
votes
2 answers

When is Element.getBoundingClientRect guaranteed to be updated / accurate?

I am working on some code that uses Element.getBoundingClientRect (gBCR), coupled with inline style updates, to perform calculation. This is not for a general website and I am not concerned or interested in if there are "better CSS ways" of doing…
user2864740
  • 60,010
  • 15
  • 145
  • 220
7
votes
2 answers

Javascript: Does modifying scrollTop/scrollLeft trigger browser reflow?

I'm wondering if animating the scrollbars with Javascript triggers browser reflow. Any difference across different browser implementations? window.pageXOffset & window.pageYOffset document.documentElement.scrollLeft &…
Jon Raasch
  • 3,703
  • 6
  • 30
  • 32
7
votes
3 answers

Avoiding HTML document reflows

I have several hundred "row" elements like this:
I need to get their clientHeight after they have been rendered on the page already. I know…
disc0dancer
  • 9,185
  • 11
  • 36
  • 46
6
votes
1 answer

Does touching the DOM trigger a reflow and repaint even if nothing changes?

I am working on a small JavaScript template engine, and I have two possible approaches for dealing with updates to the DOM when the model changes: Check if the DOM update is really needed before doing it. This has the benefit of not risking…
Anders
  • 8,307
  • 9
  • 56
  • 88
6
votes
1 answer

Reflow / repaint detection: Possible today? Possible in the future?

I'd like to know if there's a reliable way on modern web browsers to detect document reflows and/or repaints, or if there's any pressing interest for such a thing that might put it in a W3 spec. I would also like to know how it can be accomplished…
Gui Prá
  • 5,559
  • 4
  • 34
  • 59
5
votes
3 answers

Is there a libraray/method for 80 column formatted text output?

Here is what I'm looking for. I'd like to find a library or method that formats output text, such that it word wraps at 80 columns (or user configurable), and allows user defined indentation. I know that I could create one, but I suspect that there…
John Rocha
  • 1,656
  • 3
  • 19
  • 30
5
votes
2 answers

Measuring Reflow and Paint times in WebKit

I'm designing a JavaScript/HTML-driven user interface on embedded hardware with weak CPU and WebKit. Performance is not ideal, and I want to profile the application, especially timing the reflow and repaint events to get hard data on actual…
Rawler
  • 1,480
  • 1
  • 11
  • 23
5
votes
0 answers

Why is my JavaScript search MUCH slower if the previous search returned many results?

I have a really strange effect in a web app I wrote. The number of current search results has a huge impact on the speed of the next search, even though the search does in no way use the result list. I'm not sure how much code I should post here to…
Felix Dombek
  • 13,664
  • 17
  • 79
  • 131
5
votes
0 answers

How to differentiate between reflow and repaint in chrome developer tools?

How to differentiate between repaint A repaint occurs when changes are made to elements that affect visibility but not the layout. For example, opacity, background-color, visibility, and outline. Repaints are expensive because the browser …
MployBy
  • 107
  • 1
  • 2
  • 9
5
votes
1 answer

What is involved in Chrome's Recalculate Style Event?

TL;DR What causes Recalculate Style in Chrome and what could be done to reduce the time for this step? Background In an application with many elements (variable, e.g. 10,000) I observe Recalculate Style taking a long time when adding a class on the…
try-catch-finally
  • 7,436
  • 6
  • 46
  • 67
1
2
3
…
11 12