I'm using Angular UI to include modal windows on a site and every time I click to open a modal there is a noticeable delay before it injects the HTML into the DOM.
I tried absolutely everything to find out where the delay was coming from, I put the template in the cache so it wasn't loading it from an ajax request. I put timers in the dev tools console etc. and I eventually found out it was around 200ms of delay due to "recalculating styles" when opening the modal. However, the modal itself at this point only has 3 HTML tags and 2 words in it so it's not causing the delay.
I then realised that it was recalculating and repainting the whole page because the modal is absolutely positioned over the page. The page itself is very long and contains lots of repeated elements so it's a lot to redraw.
I can't repeat it easily here or in a fiddle but basically it's a very long page with lots of HTML and the modal itself is injected by Angular UI before the closing body tag. The modal itself is then position:absolute; top:0; right:0; bottom:0; left:0; to fill the screen.
I've tried the translateZ(0) trick on the modal and the page content and I've tried position:fixed instead of absolute. I just can't seem to find a way of overlaying the modal without CHrome trying forcing a recalculation of styles on the whole page.
Any ideas would really be appreciated.