reflow

How can I force a webpage page to render at a minimum resolution, regardless of how small the viewport shrinks?

I am rather new to complex CSS, and have a question- I have a page which positions a floating element along the bottom of the page. It does so by setting the Bottom: 0, and Position: Absolute. When the user resizes their browser to a very-small size, this element covers up other content on the page. Ideally, The element would continue...

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 node. When you apply a style dynamically (such as element.style.width="10px"). When you retriev...

Preventing HTTP REQUEST on javascript DOM update

I am getting re-execution of imported js files upon a hitting a form button which calls a function to insert a DOM element into page ( in simulation to exe of an ajx callback function). The DOM insertion causes a page refresh which re-requests all files from server. Nothing big on the function call: var addFashionVideo = function() { ...

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 elements. This works correctly in IE8, Firefox, Chrome. How can I force IE7 to reflow the page with t...

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 expected. Once it is programmatically added to the tree, can I expect those properties to...

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 & document.documentElement.scrollTop document.body.scrollLeft & document.body.scrollTop Thanks! ...

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 removing an element and repaint would occur when changing its color. Is this true? ...

Is there a way to determine when CSS parsing/rendering has completed?

Wondering for benchmarking purposes if there is a DOM event or other way to determine when the browser has finished parsing/rendering the CSS. I'm trying to optimize CSS selectors and need a way to measure the drawing/rendering/reflowing times. Thanks. ...

Firefox: 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 inserting it again is not an option because this reevaluates all <script> elements. Currently I ...

Webkit reflow problem when dynamically changing border to DOM element.

I have two div elements where one wraps around the other. Then I use JavaScript to add border to the outer div in runtime. Somehow webkit based browser doesn't do a reflow when the outer border is changed. The end result looks ugly - the inner div overflows the outer. Here is the HTML code: [div id="outer][div id="inner" style="border: s...