Using transform instead of box-shadow for user location dot pulse animation

[jasonbarry]

In Safari 11.0, I noticed that the Locate the user example looked like this:

I modified the CSS to use transforms instead of box-shadow for the pulse animation, which not only fixes the square-flash issue, but is also more performant because it's hardware-accelerated.

• Changed the dot diameter from 16px to 17px 15px — odd diameter widths look better when centering
• Used shorthand for animation properties to eliminate the need for animation-iteration-count properties

[mollymerp]

Thank you for contributing to mapbox gl js @jasonbarry! Changes look good to me, and 👍 on using hardware accelerated css animations where possible. I will download the new Safari tonight to try and reproduce – I'm not seeing the weird square flash in Safari 10.

@andrewharvey could you take a look at this PR since you're the original author?

[andrewharvey]

@jasonbarry 👍 I'm onboard with these changes, however when I tested this change out on Chrome 61 with https://jsbin.com/poriqe/edit?html,output it looks off...

I can try to help out with checking these changes in IE11, Android browser, Firefox.

[jasonbarry]

@andrewharvey Thanks for the feedback! Fixed that issue and made some minor adjustments, see here: https://jsbin.com/qudibixica/edit?html,output

Tested in latest Safari, Firefox, and Opera on macOS. Would definitely appreciate more cross-browser testing.

[andrewharvey]

@jasonbarry Looks better now in Chrome. I tested on IE11, it looks like it's off centre a bit (inside dot vs the animated halo). It's not a big issue, but does look like a step back compared to how it currently looks in IE11.

[andrewharvey]

I just did a bunch of testing on different devices and browsers with this and it seems fine, not sure why I was seeing it offset in IE11 before, but I'm happy with this PR. Thanks @jasonbarry

[mollymerp]

Thanks @andrewharvey – I just tried to test in IE using browserstack but I ran into the same issue I was having in October with the Geolocation plugin not working.

[andrewharvey]

@mollymerp I think browserstack is a bit hit and miss, but I did managed to see it looking good in both browserstack Windows 7 IE11 and on a real Windows 7 IE11, along with ios safari 11 and a bunch of latest android and desktop browsers.