google / blockly

The web-based visual programming editor.
https://developers.google.com/blockly/
Apache License 2.0
12.46k stars 3.71k forks source link

In Firefox blocks in simple flyout are incorrect size when blockly loaded in a display:none iframe #788

Open picklesrus opened 7 years ago

picklesrus commented 7 years ago

Field caches the width of the text since it is an expensive operation, but when this is done while blockly is display:none, the text size is incorrect in Firefox.

It is impossible for us to know when one of blockly's parent containers is going to be set to visible by a developer, but we probably need to provide something in the api so a developer can explicitly tell us when this happens so we can do things like clear the text size cache in field.js. screen shot 2016-12-16 at 11 03 42 am

picklesrus commented 7 years ago

There is (for now at least) a simple iframe demo with visibility toggle here: https://github.com/picklesrus/blockly/tree/develop-iframe-demo. You might need to swap out the toolbox to be a simple flyout to see the problem in the screenshot.

cristian-spiescu commented 5 years ago

Hello, Are there any workarounds for this issue? In my case, I use a tab navigator, and the Blockly editor is on the second tab. When it's injected, the tab is not visible, hence this issue. Thanks!

rachel-fenichel commented 5 years ago

I have a possible workaround, but it's a bit involved.

Reset the width cache to the empty object, the way we do when first creating the cache:

Blockly.Field.cacheWidths_ = {};

You will still need to render all of the blocks (call ws.getAllBlocks(), then call render() on each block) and you'll also need to update the flyout and/or toolbox. To do that, call ws.updateToolbox(xml), passing in your toolbox/flyout XML. That's pretty aggressive but should work--you may be able to find a less aggressive way to reset the flyout as well.

picklesrus commented 5 years ago

Do you have a click handler on your tab? If so, try calling Blockly.svgResize(workspace) in it. I'm not sure if it'll work, but worth a shot!