title: Why images blink on Safari but does not in Chrome when the app resizes?
body: <p>The images blink on Safari but does not in Chrome when the app resizes. I am using reusable components with different inputs. If my input is just a string, the images blink on Safari, but if my inputs are both string and arrays, then the images(iphone models) do not. Below is my partial code:</p>
  
  <pre><code>export class ProductCategoryRouteComponent implements OnInit,OnChanges {
  
    @Input ('search') searchStr: string; 
    @Input('width') mainWidth: number;
    @Input ('isSameBrandMenu') isSameBrandMenu: boolean;
    @Input ('query') productQuery: ProductQuery;
    categoryRoutes: any[] = [];
    @Input('categories') categoryRouteImages: any[] = [];
  
    ngOnInit(){
      this.getAllRoutes();
      this.leftButton = 'none';
      this.rightButton = 'none';
      this.isPages = false;
      this.isPageTopMin = false;      
      var index = 0;
      for(let n in this.categoryRouteImages)
        index++;
      this.categoryLenght = index; // can't read the lenght, always 0.
    }
    ngOnChanges(){
      this.getAllRoutes(); // blinks if the input is just a string
    }
  </code></pre>
  
  <p>I was hoping I could solve this issue using CSS so I that I do not have to include "@Input('categories')' as one of my inputs and tried</p>
  
  <pre><code> img {
    -webkit-backface-visibility: hidden;
   }
  </code></pre>
  
  <p>But still blinks on Safari ONLY.<a href="https://i.stack.imgur.com/Shin1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Shin1.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/T9RY3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T9RY3.png" alt="enter image description here"></a></p>