Why images blink on Safari but does not in Chrome

2019-08-28 22:41发布

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;
 }

But still blinks on Safari ONLY.enter image description here

enter image description here

标签: css angular
0条回答
登录 后发表回答