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
5
votes
1 answer

why would textContent not trigger a reflow

I was looking at the difference between textContent and innerText on MDN.And it shows me something that confused me a lot. 1.innerText is aware of style and will not return the text of hidden elements, whereas textContent will. (no problem, totally…
D.jennis
  • 169
  • 1
  • 10
5
votes
1 answer

Is there a way to suspend reflow during heavy DOM manipulations?

I need to do heavy DOM manipulations on the whole document of webpages in an Add-On I write. I would like to minimize the reflows so only one reflow happens for all my manipulations. Removing the body element, doing the manipulations and then…
panzi
  • 7,517
  • 5
  • 42
  • 54
5
votes
0 answers

Text reflow in Android Webview

Text reflow has been removed from Webviews since the Android KitKat release. Unfortunately, Lollipop does not fix the problem. It seems that, for some unknown reason, Google has decided that text reflow is not…
Nick H
  • 51
  • 4
5
votes
1 answer

What is the most efficient way to modify DOM elements and limit reflow?

When working with a very dynamic UI (think Single Page App) with potentially large JS libraries, view templates, validation, ajax, animations, etc... what are some strategies that will help minimize or reduce the time the browser spends on…
xDaevax
  • 2,012
  • 2
  • 25
  • 36
5
votes
4 answers

Efficient Javascript for DOM modifications

Say, I've got an HTML file that I want to process using Javascript. For example: Add some DOM elements, like span or div wrappers. Change the document styling a bit, like base font size, line-height, etc. Use a hyphentor to add ­…
Albus Dumbledore
  • 12,368
  • 23
  • 64
  • 105
4
votes
1 answer

Why does a transition occur when showing an element after setting a property while the element is hidden?

A live example can be seen here. A red square (showing) is directly above a green square (hidden as overflow). Click on the square, and both colored squares are instantly made fully transparent. Additionally, the height of the red square is set to…
Nathan Ryan
  • 12,893
  • 4
  • 26
  • 37
4
votes
0 answers

pdf.js viewer extension is laggy

I extended the pdf.js viewer so that I can "insert .svgs into the .pdf". That means, I just inserted an extra imageWrapper into each page div and added .svgs as objects inside. The result looks like the .svgs are inside the .pdf, although they are…
JoN
  • 143
  • 10
4
votes
2 answers

Reflow/layout not triggered in callback?

Based on this question: How do I know the IntersectionObserver scroll direction? I was trying to reproduce some layout/reflow cases within the observable callback, but I couldn't, so I tried to simplify the use case and end up asking this…
Jose Paredes
  • 3,882
  • 3
  • 26
  • 50
4
votes
1 answer

Why does reflow need to be triggered for CSS transitions?

I was reading this article http://semisignal.com/?p=5298 and the author wrote that "Reflow needs to be triggered before the invisible class is removed in order for the transition to work as expected. " My questions are : 1) Why does reflow need to…
Alfrex92
  • 6,278
  • 9
  • 31
  • 51
4
votes
5 answers

Is it possible to “buffer” DOM changes that happen in a loop (to increase performance)?

To make it clear what I'm asking, here is my example (fiddle). I have a list of ~500 random names. I have an input at the top that has live-style searching. On every keyup, the value of the input is taken, and every item in the list is matched…
MKirk
  • 43
  • 1
  • 3
4
votes
1 answer

Highcharts reflow does not work on class selector

Has anyone tried running the High charts reflow() function on a class selector instead of an id selector? See example where i have 2 charts with 1 button to toggle their containing div size. I have another 2 buttons, one to reflow the charts by id,…
aDvo
  • 894
  • 4
  • 15
  • 43
4
votes
2 answers

Are an element's dimensions readable immediately upon adding it to the DOM tree?

Suppose I dynamically create a DIV using document.createElement, add some inner text, and want to determine its height and width. I can see that before adding the DIV to the DOM tree, properties such as offsetWidth and offsetHeight are 0, which is…
user85509
  • 36,612
  • 7
  • 33
  • 26
4
votes
2 answers

How to force a reflow in javascript in webkit 1.2.5

I've tried everything that is supposed to invoke a reflow but that isn't happening. I'm calling my test function 10 times to draw some element on my screen and I move that element through each iteration. That loop is executed immediately and in the…
Shakal187
  • 173
  • 8
3
votes
1 answer

How can I group Javascript actions that force reflow?

I have a project which is responsible for managing the rendering of elements, but I'm running into a performance issue replacing elements and then focusing on whatever had focus before. Below is a minimal example that replicates the performance…
JRJurman
  • 1,615
  • 2
  • 19
  • 30
3
votes
1 answer

Does `window.matchMedia` trigger a reflow?

When building a page, I understand it's good practice to try and minimise "layout thrashing" or "reflow", when the browser recalculates the dimensions and position of all the elements on the page. Paul Irish has produced a handy list of the…
And Finally
  • 5,602
  • 14
  • 70
  • 110
1 2
3
…
11 12