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:
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
}
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
img {
-webkit-backface-visibility: hidden;
}