Size of iFrame

[jfmoyen]

Good day,

The plugin essentially woks BUT there is a problem of sizing of the iframe that contains the canvas. Using theme Scratchpad (and it may be a theme issue, too), the size of the iframes are rather aphazard. Consider the two following pages :

http://www.kangouvert.famille-moyen.eu/snake-game/ in this one, the frame that contains the canvas has a height of 405 px.

http://www.kangouvert.famille-moyen.eu/collector/ Here the height is 5 px.

Adding insult to injury, sometimes the size is something different, and I cannot figure out what triggers it. The source file shows nothing, a property inspector tells me that this comes from an

element.style { height: 405px; }

that is not in the source, so presumably added by some js somewhere ?

I'm a total ignoramus in css/js etc, so I have no clue where to dig further. Any help would be appreciated !

Jeff

[jfmoyen]

Further investigations. As far as I can make it, here is what happens.

The iframe is sized by a js script, at wp-content/plugins/wp-p5js-block/assets/js/iframe-sizer.js?ver=1

This script does the following:

jQuery( document ).ready( function() { const blocks = jQuery.find( '.wp-block-cgb-block-p5js' ); jQuery.each( blocks, function() { const block = jQuery( this ); const iFrame = jQuery( block ).find( 'iframe' ); jQuery( iFrame ).on( 'load', function() { const iFrameBody = jQuery( this ).get( 0 ).contentWindow.document.body; jQuery( iFrame, block ).height( jQuery( iFrameBody ).find( 'canvas' ).height() + 5 ); } ); } ); } ); so this is where the iframe gets sized. Indeed the sizes I observe are always something + 5 px (i.e. 5 px, 185 px, 405 px...).

My interpretation of this behaviour is that the canvas is first created with a nominal size, then resized to the right dimensions. In some cases this is fast, and the canvas gets its final size before the above script kicks in. In other cases, and specifically when the p5js does stuff before creating the canvas (for instance because there is a preload() function ), the sizer script above creates a frame based on a canvas of incorrect size, THEN the canvas gets resized but is stuck inside a too-small iframe.

I can think of three solutions:

1. In the p5js, make sure the first thing the script does is creating a canvas of the right size, before anything else (I'll find out how).
2. Iin the iframe-sizer.js above, put a "timer" so that the canvas size is not read immediately, but after a delay (or after the p5js did what it had to do).
3. Tweak the css by adding a custom class to the iframe, like so:

`<iframe class="foo" …

.foo { height: 400px !important; } ` (yuck)