Bug 291310 – ResizeObserver listener on canvas element sends 0 on resize instead of its new size

• Status: NEW
• Component: Layout and Rendering

My project use angular as the basic framework, using angular resizeObserver to get get the canvas's width, the code as follows:

```
ngAfterViewInit() {
    const canvas = this.canvasRef.nativeElement;

    this.resizeObserver = new ResizeObserver(entries => {
      const entry = entries[0]
      if (this.images.length > 0 && this.images[this.currentPage -1]) {
        // console.log('resize current page:' + this.currentPage);
        // console.log('resize image width:' + this.images[this.currentPage - 1].naturalWidth)
        this.scale = entry.contentRect.width / this.images[this.currentPage - 1].naturalWidth;
      }
    });
    this.resizeObserver.observe(canvas);
  }
```

The canvas is used to load image the loading method is as follows:

```
onFileSelected(event: Event) {
    if (this.islocked) return;
    const input = event.target as HTMLInputElement;
    if (!input.files) { return; }
    const file = input.files[0]; 
    const reader = new FileReader();

    reader.onload = (e: ProgressEvent<FileReader>) => {
      const imageUrl = e.target?.result as string;
      const image = new Image() as HTMLImageElement;
      image.src = imageUrl;
      image.onload = () => {

        this.images.push(image);
        this.currentPage = this.images.length;
        this.totalPages = this.currentPage;
        console.log('current page:' + this.currentPage)
        console.log('load image width:' + this.images[this.currentPage - 1].naturalWidth)
        this.initMarkersPosition();
        this.drawImageToCanvas(true);
      }
    };
    reader.readAsDataURL(file); // 以 Data URL 的形式读取文件
  }
```
in safari browser after load can get the image correct naturalWidth also width, but in the resize listener the naturalWidth and width is zero
in chrome browser do not have the problem.

if I resize the  browser's view port width, the width in resize listener is correct

[Radar WebKit Bug Importer]

<rdar://problem/149358951>

[Karl Dubost]

[e-mail],

Thanks for the report, do you think it would be possible to provide a reduced test case which is not dependent on Angular and reproduces the issue you met. That would be helpful.

I have no idea about your suggestions, if you use a reduced test that the problem do not appear, that will demonstrate the problem is from angular