As you may know, recently I’ve been dealing with Chrome Extensions and their APIs quite a bit. This is because I’ve been working on my Responsive Inspector tool. (If you haven’t seen it yet and you are into Responsive Web Designs I recommend you check it out!) Overall I had a great experience with the Chrome Extensions API, except for just one function that really gave me a hard time. This function is captureVisibleTab, which is a key to whole page screen shots feature that I implemented in Responsive Inspector.

The issue I experienced with it was that on some sites the captured screen shots had double the normal resolution. This was only happening on my MacBook with Retina display, and not on every site. On the sites that had this issue, I started isolating the problem element by element and I discovered that the root cause was a translate3d transformation. To work around this problem I included a div element with transform: translate3d(0,0,0) in a page that embeds in an iframe the captured site so that every screen shot had doubled resolution no matter if it used translate3d or not.

Next I called canvasContext.scale(1/window.devicePixelRatio, 1/window.devicePixelRatio) on the Canvas Context that I drew captured image into. This scaled screen shot to proper resolution, and the latest version of Responsive Inspector (now available in Chrome Web Store) runs like a charm on Retina MacBooks