preventing screen redraw on resizing

Question

Is there a way to prevent the redrawing of the screen while resizing a responsive website?

I want to have a responsive website, but I don't like the cheap animations that are involved when resizing the screen (media breaks, instant disappears, text wraps (really ugly))

I hope there is a way to tell the browser to redraw the screen only when resizing has stopped or some similar solution..

Is there?

Can you give some examples, I don't get why media doesn't do the trick — CMPS, Jun 27 '14 at 04:21
Yes please give more examples. Also, are you using Twitter Bootstrap? (or anything else like that). It handles responsive design pretty well. — antoniovassell, Jun 27 '14 at 04:25

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

No. When you change the size of any DOM element, including the body, all browsers "reflow" (i.e. redraw) the page. Even when you include an img element without an explicit size, the page will reflow when an image is loaded.

You may read more details here:

When does reflow happen in a DOM environment?

edited May 23 '17 at 10:26

Community

1
1

answered Jun 27 '14 at 04:34

Andrei Volgin

40,755
6
49
58

score 0 · Answer 2 · answered Jun 27 '14 at 04:49

if you want to prevent redrawing set a timer something like that might help

    var timeoutHandler;
    var startet=false
    resize=function(){
           clearTimeout(timeoutHandler);
           if(!startet){
              startet=true;
             //get body pixel width
             //get body pixel height;
             //save css width value 
             //save css height value
             //set body width= width pixel value;
             //set body height= height pixel value;
           }
            timeoutHandler=setTimeout(function(){
                 //restore css values
                  startet=false;
            },100);

    }

preventing screen redraw on resizing

2 Answers2