blockly-samples

blockly-samples copied to clipboard

Category

• Examples

Component

devsite-demo

Describe the bug

When initially visiting https://developers.google.com/blockly, the sample blocks are misplaced to the very upper-left corner of the workspace, and all block labels are offset vertically by several pixels.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://developers.google.com/blockly
2. See error (see first screenshot below).
3. If the problem does not appear, try one of the following:

• hit shift-reload, or
• use Chrome's cookie menu (click on the padlock) to delete all cookies from developers.google.com and hit (normal) reload.

Expected behaviour

Blocks should be positioned some distance from the upper-left corner of the workspace, and labels should be positioned correctly (see second screenshot).

Screenshots

First visit:

Subsequent visits (after soft reload or changing the language):

Additional context

Based on some initial experimentation, @NeilFraser suspects this is due to a race condition loading the CSS which sets the size of the border around the demo.

Related to https://github.com/google/blockly/issues/6609

Not reproducible in Firefox or Safari; just Chrome. Not reproducible when console is open. Not reproducible when host page is anywhere except https://developers.google.com/ Not a recent regression in Blockly (at least 1.5 years old), though it could be a recent Chrome regression.

This is very definitely a subtle timing bug in Chrome.

The origin in Blockly is from utils/dom.ts measureFontMetrics. block.offsetTop should be measured as '14' after div.style.alignItems = 'baseline'; is set, but instead it returns 0.

I have a very delicate setup on my machine that currently allows me to reproduce this and debug it.

While this bug was first observed in blockly-samples, this is actually a Blockly bug.

@NeilFraser Was this completed?

Nope. I got a fragile, but consistently reproducible test case on my machine, and was in the process of debugging it. But then got assigned other work.

This bug still exists, I was able to reproduce it just now (though I no longer have a reliable setup).

This appears to still be present on the redesigned page, although the blocks are no longer overlapping/jumbled, they're just intermittently not sized to fit the workspace area.