Question

I’m afraid the product I’m working on is so inherently full of esoteric client-sensitive stuff that I can’t meaningfully reduce the problem scenario to a reproductible example, so this is appealing to domain expertise and insight, based on the following code:

http://jsbin.com/barney/1/edit

(makes use of jQuery, Underscore, Mustache, a few plugins and of course Google Maps v3 JS API)

I am using the Google Maps JS API to produce a relatively simple web app. So far all it does is create a custom content InfoWindow, dynamically changing the content as and when users click on custom MarkerImages. The map is desaturated by use of stylers.

Intermittently (can’t reliably reproduce) the process will completely freeze when I click one of these custom markers. I have a breakpoint on the first line of my code immediately within the event.addListener – the first time my code is hit in the usual stack of things – but the process never gets there: everything is frozen by the time I get there.

4 marker clicks usually does the trick, but other times the application will run through the entire UX without a fuss.

Additional info, off the top of my head:

• I have a couple of jQuery click events delegated to the body (not
  that these are firing in the observable stack);
• Left alone for 5 minutes or so, this app will freeze anyway, so I suspect I am unwittingly silently abusing the Maps API anyway.

Any advice on gotchas for this kind of scenario would be really appreciated.

Answer 1

All of the above issues were resolved by removing CSS3 transitions from an ancestor element of the Google Maps DOM structure, which makes use of translate3d(0) as a hack to force GPU-accelerated animation. Bizarre but true. Tidbits of anecdotal evidence from apparently unrelated performance issues in Webkit reveal that applying transitions to translate3d‘d has all sorts of uncaught memory leak issues. Odd, considering conventional wisdom has it that applying translate3d to transitions is a way of relieving CPU performance hogging!