Chrome Version: Version 69.0.3476.0 (Official Build) canary (64-bit)


What steps will reproduce the problem?
(1) http://jsfiddle.net/greggman/gmpkvu30/
(2) size the window

What is the expected result?

The square should stay square

What happens instead?

The square gets stretched into a rectangle


The issue. The worker is structured like this

  const appInfo = {
    clientWidth: 300,
    clientHeight: 150,
  };

  function render() {
    if canvas size does not match appInfo size
      resize canvas

    ...renderScene...

    requestAnimationFrame(render);
    gl.commit();
  }
  requestAnimationFrame(render);

  onmessage = receive appInfo from main thread

On the main thread if the canvas has changed size it sends a message

That message arrives only once. If you look at the console output you'll see the main thread is sending messages about the new size but the worker never receives them.

Given that it's using requestAnimationFrame and therefore should be able to respond to events it seems like it should be able to receive the messages.

As for why rAF then commit. Since it takes time to schedule a rAF it makes sense to ask for the next frame before committing since committing supposedly blocks so we want the system to know that we want another frame as soon as possible therefore we ask for a raf before committing.

Note that swapping those (http://jsfiddle.net/greggman/gpnqt7db/)

    gl.commit()
    requestAnimationFrame

does not fix the problem