Responsive resize (bug?) resulting in height = 0px

Bugs
1

here is a simple demo: An Anonymous Pen on CodePen

It is a 3 col responsive flexbox layout (css by Bulma.io). The middle colum contains the canvas and is invisible for mobile devices. please resize your browser, the breakpoint is at 1088px. after the canvas is hidden once, it’s height stays at 0px;

is there a solution to this?

same with 3.3 and 4.0

2

This seems more a CSS question no? Who is controlling canvas.style.height? Because bjs will align with that value

3

bjs isn’t just align with that value, bjs is modifing it. It does it corectly with the width, but seem to looses the height and the ratio - in that responsive reactions. In the codepen above, the parents width is defined and the height isn’t limited.

The used bulma library is css only, there is no other js than babylon able to edit the DOM.

I dont know what makes bjs set the canvas height to 0.
What can I do? I do have a width and a ratio, how can I restore the height out of it?

4

Well here is the code:

image
image.png1470×313 55.4 KB

the canvas.clientHeight is 0 so bjs can’t do anything about it

5

Does look like some weird issue, seems if the canvas is set to 0 height, it won’t be expanded again.
This fixes it… Canvas won’t be resized when column is hidden, and force the column to expand it’s height when it’s displayed again.

window.addEventListener('resize', function() {
  if (window.innerWidth >= 1088) {
    engine.resize();
  }
});

Here’s a fiddle, (sorry, codepen is always so buggy)
https://jsfiddle.net/zpoh6gn1/

1 Like
6

Thanks aWirdo for undesrstanding my issue,
your suggestion helped me.