AnsweredAssumed Answered

CSS Webkit Map Animations Not Working in iOS 11

Question asked by LeviCecil on Jun 14, 2018

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">

Outcomes