I have a Cordova/PhoneGap/ArcGIS JS hybrid app with CSS webkit animation that is a flashing dot on the user's location on a map. It is based on this example for geolocation. The dot flashes as it should on my older iPhone 5c and Android, but not on my newer iPad or an iPhone X with iOS 11.3. It's just a solid red dot. Do I need special CSS settings for iOS 11? Here is the CSS and my HTML meta tag:
<SPAN class="selector token">@-webkit-keyframes
pulse</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="selector token">0%</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1.0<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">45%</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> .20<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">100%</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1.0<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">@-moz-keyframes
pulse</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="selector token">0%</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1.0<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">45%</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> .20<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">100%</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1.0<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#map_graphics_layer</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">-webkit-animation-duration</SPAN><SPAN class="punctuation token">:</SPAN> 3s<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-webkit-animation-iteration-count</SPAN><SPAN class="punctuation token">:</SPAN> infinite<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-webkit-animation-name</SPAN><SPAN class="punctuation token">:</SPAN> pulse<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-moz-animation-duration</SPAN><SPAN class="punctuation token">:</SPAN> 3s<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-moz-animation-iteration-count</SPAN><SPAN class="punctuation token">:</SPAN> infinite<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-moz-animation-name</SPAN><SPAN class="punctuation token">:</SPAN> pulse<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#map_graphics_layer</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">-webkit-animation-duration</SPAN><SPAN class="punctuation token">:</SPAN> 3s<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-webkit-animation-iteration-count</SPAN><SPAN class="punctuation token">:</SPAN> infinite<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-webkit-animation-name</SPAN><SPAN class="punctuation token">:</SPAN> pulse<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-moz-animation-duration</SPAN><SPAN class="punctuation token">:</SPAN> 3s<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-moz-animation-iteration-count</SPAN><SPAN class="punctuation token">:</SPAN> infinite<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">-moz-animation-name</SPAN><SPAN class="punctuation token">:</SPAN> pulse<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>width<SPAN class="punctuation token">=</SPAN>device-width, initial-scale<SPAN class="punctuation token">=</SPAN>1, maximum-scale<SPAN class="punctuation token">=</SPAN>1, minimum-scale<SPAN class="punctuation token">=</SPAN>1, user-scalable<SPAN class="punctuation token">=</SPAN>no, minimal-ui,viewport-fit<SPAN class="punctuation token">=</SPAN>cover<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
