Parts of the UI keep disappearing in a Chrome app

Question

I'm working on a Chrome app called Postman (https://chrome.google.com/webstore/detail/postman-rest-client-packa/fhbjgbiflinjbdggehcddcbncdddomop). While using Postman on a Macbook with a retina display, a weird problem keeps cropping up.

Sometimes (about 1 in 20 clicks), clicking on a UI element makes half the UI vanish. The 'Elements' tab of dev tools shows the correct structure - all the divs are there, with display: block. They're just not rendered. Resizing the window by a tiny amount forces a redraw, and all elements become visible again. (I'm currently using Chrome v 37.0.2062.94)

There are no errors printed in the console.

So far, this issue has only been reported on Macbooks with a retina display. I've reproduced this on Canary as well.

Screenshots: https://cloud.githubusercontent.com/assets/1365493/4188877/06d8b6bc-3777-11e4-8c6b-3f23edfa7c5b.png https://cloud.githubusercontent.com/assets/681190/4188491/1c8f99a2-3773-11e4-8cc9-bbd5d3165530.png

Answer 1

We went through all elements that had overflow: scroll; and added -webkit-transform: translate3d(0,0,0); to force better hardware acceleration on those elements.

That fixed the problem. Full detail is posted at http://blog.getpostman.com/index.php/2015/01/23/ui-repaint-issue-on-chrome/

To sum it up - the issue seems to be around GPU-composting of scrolling elements (when scrollbar occupied right padding) in very high resolutions.