Google Chrome breaks HTML layout when hiding elements

Question

I have created a HTML layout for footer-docked sticking-out windows:

<style>
#footer-dock {
        position: fixed;   
        bottom: 0px;
        right: 0px;
        height: 1x;        
 }

#wnd-cont {
   float:right;    
   /* width is controlled from JS */
   height: 1px;       
}    

#wnds-area {
   float:right;  
   height: 1px;          
}   

 .wnd-placer {
        width: 270px;  
        height: 1px;   
        margin: 0 5px; 
        float: right;      
    }


/* floats out of placer */
.wnd {
       overflow: hidden;   
       width: 270px;  
       position: absolute;           
       bottom: 0px;  
    }

    .hdr {
        border:1px solid green;        
        height: 32px;
        background-color: green;
        position: relative;
    }   

    .title {
        color: gray;
    }

    .bdy {
       background: white;
       border: 1px solid green;
       height: 400px;
    }       
 </style>

        <div id="footer-dock">       
             <div id="wnd-cont">
                <div id="wnds-area">  
                    <div class="wnd-placer">         
                        <div class="wnd">             
                            <div class="hdr">
                            </div>
                            <div class="bdy">
                            Something else here Something else here Something else here Something here Something else here
                            </div>        
                        </div>   
                    </div>
<!-- other dynamically added windows go here -->
                </div> 
            </div>
        </div>

I need those placeholders and footer dock to be no more than 1px high, so I can click through the footer when there are no windows. The windows ( with all ofits contents) are added and removed dynamically using Javascript.

Everything works fine in Firefox and even in IE7, but Chrome has some weird problems.

At first, there were problems because I did not put 1px height to the footer and window placers - Chrome stacked windows onto each other. After putting 1px height, it started behave normally when adding windows, but when I remove any window using Javascript, the other windows do not reflow (they have .wnd-placer class with float: right) until I do one of the following:

zoom-in the page and then zoom back to 100% - suddenly everything jumps where it should be;
open developer panel and tweak some CSS of the .wnd-placer - just enable/disable of any property is enough, and again all my windows jump where they should be.

This is just Chrome specific, it seems, Chrome has some problems recalculating the layout of those .wnd-placer DIVs after I remove some of them.

Is there any way to force Chrome to redraw my windows (just like it does when I zoom-in/zoom-out or enable/disable any CSS property) so they reflow to the right, as they do in other browsers?

Your question isn't very clear. A working example would go a great way to helping figure this question out. — tkone

JustAMartin JustAMartin · Accepted Answer · 2012-01-09T09:45:53

While there was no better answer, I did a following quick&dirty workaround for Chrome:

    // force redraw for Chrome
    $('#footer-dock').hide(); 
    setTimeout(function(){
       $('#footer-dock').show(); 
    }, 10);

It works. Of course I would like to get rid of it, but I cannot find the "magical CSS" which would solve this issue.

Google Chrome breaks HTML layout when hiding elements

1 Answers