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:
@-webkit-keyframes
pulse
{
0%
{
opacity: 1.0;
}
45%
{
opacity: .20;
}
100%
{
opacity: 1.0;
}
}
@-moz-keyframes
pulse
{
0%
{
opacity: 1.0;
}
45%
{
opacity: .20;
}
100%
{
opacity: 1.0;
}
}
#map_graphics_layer {
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: pulse;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: pulse;
}
#map_graphics_layer {
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: pulse;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: pulse;
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui,viewport-fit=cover">
I'm still trying to figure this out. Does anybody have experience with this?