Bing Maps Ajax v7 Pushpin Moving on Zoom/Pan

Question

I'm using bing maps ajax v7. On map zoom/pan the pushpins seem to be animating/rendering needlessly. They are not anchored statically to their coordinates as they should be or previously were (before zoom/pan) and on zoom/pan they seem to be animating/rendering from a different position off screen.

This happens in all browsers (Mac: [Chrome, FF, Safari], Windows: [IE, Chrome, FF]).

Seems to be similar to this SO Q: Virtual Earth (Bing) Pin "moves" when zoom level changes - but different api version and the scale solution isn't applicable.

Anyone run into this?

Answer 1

I was running into this exact issue. When I would zoom out or pan, the pushpins would animate every time, making for a terrible user experience. I found out that I had some global styles being applied to my site to make links animate into position when I scaled the browser. This may come default in some style sheet boilerplate. This was the offending style

  a {
    -webkit-transition: all 0.5s ease;
    /* For Chrome <= 25, Safari <= 6.0, iOS Safari <= 6.1, Android Browser <= 4.3 */
    -moz-transition: all 0.5s ease;
    /* For Firefox <= 15 */
    -o-transition: all 0.5s ease;
    /* For Opera <= 12 */
    transition: all 0.5s ease; }

I targeted the map pushpins directly by applying the following style:

/* Prevent a tag inside of map to animate */
.MapPushpinBase {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;}

which effectively removes the CSS animations on the pushpins.

Problem solved (for me)