ebidel / demos Goto Github PK

This is for your offscreen canvas example. When you try to upload a second image an error occurs because there is an attempt to resize a canvas that has already transferred control to offscreen.

I am also running into this issue with a website i'm developing. The only difference is that my website requires the canvas to be resized after certain events occur.

I would resize a normal canvas with code like this:

this.$.canvas.width = this.size * window.devicePixelRatio;
this.$.canvas.height = this.size * window.devicePixelRatio;
    
this.$.canvas.style.width = this.size + 'px';
this.$.canvas.style.height = this.size + 'px';
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

Ever since I started using offscreen canvas that code would throw the same error as above. I tired instead setting the width and height of the offscreen canvas object. I also set the scale in a web worker because i'm running the animation off the main thread. There is no error when I do this however it does not seem to resize properly.

Main

this._offscreen.width = this.size * window.devicePixelRatio;
this._offscreen.height = this.size * window.devicePixelRatio;
    
this.$.canvas.style.width = this.size + 'px';
this.$.canvas.style.height = this.size + 'px';

Web Worker

self.onmessage = e => {
  if (e.data.devicePixelRatio) {
    ctx.scale(e.data.devicePixelRatio, e.data.devicePixelRatio);
    ctx.commit();
  }
}

I was wondering if anyone knows how to resize an offscreen canvas properly.

Seems not to work on opera mobile browser.

When jump links jump you down the page, no IntersectionObserver events fire. See w3c/IntersectionObserver#258 for more info.

Expected Behaviour

When scrolling inside the chatbox window, when I hit the bottom, nothing should scroll not even the background div.

Actual Behaviour

When scrolling inside the chatbox window, when I hit the bottom the background page is scrolling.

Cross-posted from https://bugs.chromium.org/p/chromium/issues/detail?id=789821

The reason there is no glow on the document is that overscroll-behavior is set to "none" instead of "contain" on the document. So I suppose the suggestion is to change that to "contain" on the demo?

Is it possible for us to update the demo to use contain on the document in your chatbox.html demo instead?

Expected:

html, body{
  overscroll-behavior: none;
  position: fixed;
  overflow: hidden;
}

Applying the styles above should disable pull-to-refresh.

Actual:
pull-to-refresh still occurs. See video below.

Verions:
iOS (currently latest): 11.2.6
Chrome: 65.0.3325.152