ENA-148: Highlighted blocks are blurry on non-retina display in some situations

[ericrosenbaum]

Expected Behavior

Blocks should always render crisply.

Actual Behavior

In some situations, the blocks become blurry. I had seen some reports of this on the forums, and stumbled on an example while viewing a kid's project in Chrome on my non-retina display. I noticed that the blurriness happened on a "when left arrow key pressed" stack that was highlighted because it was running.

Steps to Reproduce

1. Use a non-retina display
2. Start from the default project, and add this stack to the cat sprite:
   
3. Press the left arrow key to run the stack
4. Note that the highlighted stack is blurry:
   

Notes

• The blurriness does NOT occur if you use "when space key pressed"!
• It DOES occur for left, right, up or down arrow
• It DOES NOT require pressing the key itself - you can click the stack to run it (if it starts with an arrow key pressed hat), and get the blurriness
• It does NOT occur for any other key
• It does NOT occur when using the green flag or sprite clicked hats
• It DOES occur for certain other hats, including "when backdrop switches to backdrop1"

System Details

Chrome 95, Mac OS 10.15.7

[BryceLTaylor]

I just did some follow up research and it looks like, on mac, if you use Firefox or Safari it will be blurry no matter which key you include in the hat block. Chrome is doing something different that makes it not be blurry in some situations.

On Chrome, changing the what is in the dropdown while the block is running causes the blur to change. So starting with "When Left Key Pressed" it will be blurry when run. But if you change it to the a "When Space Key Pressed" while it's running it will stop being blurry.

[apple502j]

This may be a regression on Chrome side.

[griffpatch]

I have noticed the blurring of blocks on PC chrome over the last few weeks. It's caught in all my YouTube tutorial videos. Also, while this is occurring, the projects are running considerably slower than previously too. To get full frame rates I have to once more run full screen or switch to another sprite without running scripts. This is a regression, as we had the same issue a long time back where we'd need to create a blank first sprite to mitigate the issue. But at least it's only occusing now if the running blocks are visible.

…

On Sat, 13 Nov 2021 at 03:21, apple502j ***@***.***> wrote: This may be a regression on Chrome side. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/LLK/scratch-gui/issues/7850#issuecomment-967770943>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABTM3PQFEYEUR6VTHKSARJTULXKUXANCNFSM5H5NPV6Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[sakhiy2010]

Mine too! When I clicked the green flag, it's become so blurry.

[nexensys]

It looks like the transform: translateZ(0) hack can repvent this blurriness in chrome. Scratch Addons (specifically me) is looking into adding a patch for this that will fix the issue for both running blocks as well as the blocks made transparent by one of the addons, but we (I) have yet to find a way to work in this translation without breaking the transition placed on the elements by Blockly.

[benjiwheeler]

I was able to experience the problem using Chrome 105.0.5195.125 (Official Build) (arm64) on an M1 MacBook Pro with a retina screen -- it's hard to see the blurriness, but by zooming the screen (using control-scroll) it's very clear.

Interestingly, I encountered the problem with "when left arrow key pressed" and "when space key pressed" both, but not with "when c key pressed" or with a green flag hat block.

"when left arrow key pressed", not running:

"when left arrow key pressed", running (note much more anti-alias blurring):

"when c key pressed", not running:

"when c key pressed", running (note no difference):

[benjiwheeler]

It looks like the transform: translateZ(0) hack can repvent this blurriness in chrome. Scratch Addons (specifically me) is looking into adding a patch for this that will fix the issue for both running blocks as well as the blocks made transparent by one of the addons, but we (I) have yet to find a way to work in this translation without breaking the transition placed on the elements by Blockly.

@ErrorGamer2000 Did you ever make that patch? If so, I'd be curious to know what/where your fix was

[nexensys]

@benjiwheeler I wasn't able to make it work due to the way that the workspace svgs work, sorry. I may make another attempt soon though.