nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Geolocation &amp; 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.

タグ付けされた投稿をもっと見る

Accepted answers

All comments

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?

MattLane

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

khutchins

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

Has there been an update on this issue?

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

khutchins

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);

        }
      }

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]

khutchins

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.