Skip to content

Commit

Permalink
Improve check for whether canvas is visible
Browse files Browse the repository at this point in the history
As seen with https://stackoverflow.com/questions/57676500 scaling the
canvas causes problems for glslCanvas.  This is because checking for
whether the canvas is visible mixes values from the bounding client rect
(which is affected by scaling), with the canvas element (which is not).

Use the bounding client rect to determine the visibility of the canvas.
  • Loading branch information
whydoubt committed Oct 30, 2019
1 parent f05305e commit e5c8183
Show file tree
Hide file tree
Showing 6 changed files with 11 additions and 7 deletions.
3 changes: 2 additions & 1 deletion dist/GlslCanvas.es.js
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,8 @@ function parseUniforms(uniforms) {
}

function isCanvasVisible(canvas) {
return canvas.getBoundingClientRect().top + canvas.height > 0 && canvas.getBoundingClientRect().top < (window.innerHeight || document.documentElement.clientHeight);
var bound = canvas.getBoundingClientRect();
return bound.top + bound.height > 0 && bound.top < (window.innerHeight || document.documentElement.clientHeight);
}

function isPowerOf2(value) {
Expand Down
3 changes: 2 additions & 1 deletion dist/GlslCanvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -888,7 +888,8 @@ function parseUniforms(uniforms) {
}

function isCanvasVisible(canvas) {
return canvas.getBoundingClientRect().top + canvas.height > 0 && canvas.getBoundingClientRect().top < (window.innerHeight || document.documentElement.clientHeight);
var bound = canvas.getBoundingClientRect();
return bound.top + bound.height > 0 && bound.top < (window.innerHeight || document.documentElement.clientHeight);
}

function isPowerOf2(value) {
Expand Down
2 changes: 1 addition & 1 deletion dist/GlslCanvas.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/GlslCanvas.min.js.map

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion lib/GlslCanvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -884,7 +884,8 @@ function parseUniforms(uniforms) {
}

function isCanvasVisible(canvas) {
return canvas.getBoundingClientRect().top + canvas.height > 0 && canvas.getBoundingClientRect().top < (window.innerHeight || document.documentElement.clientHeight);
var bound = canvas.getBoundingClientRect();
return bound.top + bound.height > 0 && bound.top < (window.innerHeight || document.documentElement.clientHeight);
}

function isPowerOf2(value) {
Expand Down
5 changes: 3 additions & 2 deletions src/tools/common.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export function isCanvasVisible(canvas) {
return ((canvas.getBoundingClientRect().top + canvas.height) > 0) &&
(canvas.getBoundingClientRect().top < (window.innerHeight || document.documentElement.clientHeight));
let bound = canvas.getBoundingClientRect();
return ((bound.top + bound.height) > 0) &&
(bound.top < (window.innerHeight || document.documentElement.clientHeight));
}

export function isPowerOf2(value) {
Expand Down

0 comments on commit e5c8183

Please sign in to comment.