title: CSS Unknown Distortions happening only on iOS in Angular Application
body: <p>A several month mystery has yet to be solved and I am hoping someone has seen this before and knows how to fix it. Using the Angular framework to build a PWA, I am encountering an issue with how CSS images and CSS transformations are causing distortions and apparitions which effectively means the app can't be released for iOS devices until this is corrected.</p>
  
  <p>It is very inconsistent and happens randomly from one to several images at a time. It only happens within iOS. Tested and reproduced on the following devices:</p>
  
  <ul>
  <li>iPhone 6 (iOS 12.1.4) Safari &amp; Chrome &amp; in PWA Standalone</li>
  <li>iPhone 6s (iOS 12.1.4) Safari &amp; Chrome &amp; in PWA Standalone</li>
  <li>iPhone 6+ (iOS 12.1.4) Safari &amp; Chrome &amp; in PWA Standalone</li>
  <li>iPhone x (iOS 12.2) Safari &amp; Chrome &amp; in PWA Standalone</li>
  <li>iPad Pro (iOS 12.2) Safari &amp; Chrome &amp; in PWA Standalone</li>
  </ul>
  
  <p>It does not happen on any Android devices going back as far as the Galaxy S4 and the Galaxy Tab A, and as current as the Pixel 3... nor does it occur in Chrome, Safari or Firefox on desktop machines. </p>
  
  <p>There are also cases where a single icon will be duplicated across the entire set of icons, like on the tab bar for instance.</p>
  
  <p><a href="https://i.stack.imgur.com/RxQk5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RxQk5.png" alt="Inline Style"></a></p>
  
  <pre><code>&lt;div style="background-image: url('/assets/elements/SolidCircleCheck.png');
  background-position: center center; 
  background-size: contain; 
  background-repeat: no-repeat; 
  image-rendering: crisp-edges; 
  height: 3rem; width: 3rem; 
  filter: brightness(2) 
  drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 0.1rem); 
  margin: auto;"&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><a href="https://i.stack.imgur.com/r5hkj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r5hkj.png" alt="Using Class rather than inline"></a></p>
  
  <pre><code>&lt;div class="nav-tab-section-a nav-tab-inactive"&gt;
    &lt;img class="nav-tab-image text-no-select" src="/assets/nav/Chat.png" alt="Chat"&gt;
    &lt;br /&gt;&lt;span class="nav-tab-title text-no-select"&gt;Members&lt;/span&gt;
  &lt;/div&gt;
  
  .nav-tab-section-a {
      grid-area: nav-tab-section-a;
  }
  .nav-tab-active, .nav-tab-inactive {
      margin: 0 auto;
      align-content: center;
      text-align: center;
  }
  .nav-tab-inactive {
      -webkit-filter: brightness(110%);
      filter: brightness(110%);
  }
  .nav-tab-image {
      height: 3.25rem;
  }
  .text-no-select {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  </code></pre>
  
  <p>As you can see, the problem occurs with both inline style and Style Sheet methods as well as using HTML native <code>&lt;img&gt;</code> tag and as a div background. </p>
  
  <p>For a while I thought it could have been an Angular Lifecycle hooks issue where elements were being redrawn, but this has since been corrected and the images are not being re-rendered with every DOM change.</p>
  
  <p>Has anyone ever encountered and solved this before?</p>