glowStack() causes executing stack to hide until glow is removed, on iOS/Android

[msintov]

Expected Behavior

The executing script should have a yellow outline.

Actual Behavior

The executing script disappears.

Steps to Reproduce

We have observed this behavior on iOS and Android for scripts small and large, but in my reproducible case here, this behavior occurs for a very large script in the iOS simulator.

1. Open the vertical playground in iOS simulator (I've tried iOS 9.3 and iOS 10.0. I believe it also repros on iOS 10.3. Perhaps also iOS 11).
2. Paste this xml in the text box for importing:
   xml_for_long_script.txt
3. Import the script by tapping "Import from XML"
4. Tap the green flag block, which is the first block of the long script
5. Tap "Stack glow last clicked block" button

Note: If you remove the last block at the very bottom of the stack and then repeat steps 4 and 5, the script will not disappear, but notice that the glow outside is not yellow but instead is the color of the blocks it surrounds (as you can see if you page down through the stack).

Operating System and Browser

Xcode iOS simulator 9.3 and 10.0 on macOS 10.11.6

[rachel-fenichel]

Is the system under serious memory pressure when this happens?

[msintov]

@rachel-fenichel No, I don't believe this is a memory issue. For the reproducible steps listed above, the bug can happen even if the simulator was just booted, and my guess is that those steps don't take a lot of memory. Note that if the svg attribute to create the gaussian blur is not applied, then the script does not disappear.

[xmeow]

I can reproduce this bug under chrome58, but works fine on chrom63. Looks like browser depends.

[paulkaplan]

Yikes, large stacks cause some seriously strange behaviors

1. Confirmed the "disappear on stack glow" with the very large stack on iOS 11 iPad Air simulator
2. Confirm the "stack glow changes color" if you scroll down the page. Here is a screenshot. Scrolled halfway down, you can see where it goes from yellow to the color of the block
   
3. Also, the dragging shadow gets super strange with large stacks of blocks.
   

Maybe we need to use a simpler SVG filter for mobile browsers? Unfortunately this only seems to happen on large stacks...

[paulkaplan]

Oh also I can replicate this on desktop Safari 11 on OS 12.6 (Sierra). So strike this being a "mobile browser thing", I'm seeing it as just a "safari" thing. And @xmeow I wasn't able to replicate this on old versions of Chrome on Mac, were you on android? Can you post screenshots?

[xmeow]

I work in a electron binding of version 1.7.10 (chrome 58)

And this only happens once custom procedure used.
Try to make a custom procedure block and execute(or apply blocklyStackGlowFilter), and it will disappear.

But everything works fine if I move to chrome63.

[paulkaplan]

So I think I have isolated the root cause of this. It appears that with very tall SVG elements, safari's SVG feGaussianBlur shrinks the source element. You can see this by manually removing everything after the gaussian blur from the stack glow filter.

The stack glow is a composite of multiple filters, and because the blur part is shrunk vertically, it causes the "change" from yellow to block color shadow when you scroll down.
Furthermore, at tall enough heights, the result of the blur disappears entirely, which because of the way the final composite is done, causes nothing to show up at all.

I created a JSfiddle with a simplified filter showing the different behaviors:

https://jsfiddle.net/mc7qpsvw/9/

@xmeow is it possible to try that jsfiddle in the old version of chrome as well, to confirm it is the same issue?