Geolocation & CSS3 Samples broken in Chrome

[SamLarsen]

The following samples:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/exp/exp_geolocate.html
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/mobile/mobile_arcgis.html
Are broken in the latest Chrome.  Geolocate yourself and then pan around the map a bit and you will see the geolocated graphic move all over the map.

I have checked other graphics layer samples and they seem to be fine - which indicates that it is something to do with the CSS3 transforms on the graphics layer.  I did test these samples extensively over the last few months in Chrome and they were fine.   I even created an application or two using them.  It must have been triggered by a recent update to Chrome.  All seems well in the latest Firefox, Opera and IE9.

[KellyHutchins]

There was a slight issue with the pt variable in one of the samples that we'll fix and get updated later today but I  don't think that is the issue. I tested on Chrome and can't reproduce - if you debug the app can you see if the coordinates being returned from the geolocation api are correct?  Can you also test a non-esri geolocation sample like this one to see if it generates the correct result in Chrome:

http://html5demos.com/geo

[SamLarsen]

The geolocation sample you provided worked fine - but that was probably because there were no CSS transforms on the graphics on that map.
The following video demonstrates the mobile/Arcgis.com/geolocation sample in Chrome version 17.0.963.56.  You will see the geolocation graphic move all over the map.  This is probably due to a recent update to Chrome and the way that CSS3 transforms interact with graphics stored in an SVG or Canvas graphics layer.  I would suggest it is more of a bug with Chrome than the JavaScript API.

" rel="nofollow" target="_blank">http://www.youtube.com/watch?v=x0OW8MWzB4c[/video]

[KellyHutchins]

In my testing the sample works again if I remove the 'animation' applied to the located graphic.  I'll look into how any recent Chrome changes may be breaking this sample and update it as soon as possible.

 @-webkit-keyframes
       pulse
      {
        0%
        {
          opacity: 1.0;
          -webkit-transform: scale(1.25);

        }
        45%
        {
          opacity: .20;
          -webkit-transform: scale(.80);

        }
        100%
        {
          opacity: 1.0;
          -webkit-transform: scale(1.25);

        }
      }

[MattLane]

Has there been an update on this issue?

I'm still seeing it in Chrome version 18 (stable), and 19 (beta).

[KellyHutchins]

Matt,

Looks like it's only the scaling that is causing the issue so if you remove the css that scales the image the sample should work in the current version of Chrome:

   -webkit-transform: scale(1.25);

[MattLane]

Thanks for the follow-up Kelly, the animation still looks good without the scaling.

[kyleknoche]

I realize this thread is a bit old but I've just run into an issue in chrome that is moving my map using the webkit-transform somethign or other and is offsetting my data.  Works fine in IE.

Anyone have any thoughts on this?