Summary: | Canvas flickers when scrolling | ||
---|---|---|---|
Product: | WebKit | Reporter: | Joseph Pecoraro <joepeck> |
Component: | Canvas | Assignee: | Nobody <webkit-unassigned> |
Status: | NEW --- | ||
Severity: | Normal | CC: | dino, joepeck, simon.fraser |
Priority: | P2 | ||
Version: | WebKit Nightly Build | ||
Hardware: | Unspecified | ||
OS: | Unspecified |
Description
Joseph Pecoraro
2016-12-08 19:04:44 PST
Looks like that logo is using mouse position as an input. Probably related to how often we report mouse position changes during scrolling, and whether we flicker between two values. The page has a rAF draw loop for the logo:
> function main (time) {
> fixdim()
> ctx.clearRect(0,0,canvas.width,canvas.height)
>
> var t = time/10000
> ctx.strokeStyle = ctx.fillStyle = color
> var sm = 1
> var m = tesseractwithrotation(t, t*2, t*3, mouse.x/100, mouse.y/100, 0)
> drawtesseract(ctx, m, {
> x: canvas.width/2,
> y: canvas.height/2,
> size: gh*canvas.height,
> line_width: 2,
> })
>
> lasttime = time
> requestAnimationFrame(main)
> }
It seems as if the fixdim() is causing this issue in Safari when it sets the canvas.width and canvas.height to values that end up not changing. When that happens WebKit clears the canvas.
Fortunately the code has a global variable "freeze" that you can set to true and it skips this code. When set the canvas no longer flickers.
So perhaps we should be smarter when setting the width/height of a canvas to a value that ultimately doesn't cause a change.
Yeah, this could be smarter if the width/height is not changing we may not need to reset (which clears):
> void HTMLCanvasElement::parseAttribute(const QualifiedName& name, const AtomicString& value)
> {
> if (name == widthAttr || name == heightAttr)
> reset();
> HTMLElement::parseAttribute(name, value);
> }
|