scratchfoundation / scratchfoundation/scratch-blocks

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

Open
#2,720 8 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

High Prevalence Medium Severity priority 2
Dominant language
JavaScript
Stars
2.8k
Forks
1.6k
Avg merge
4h 51m
Merged PRs (30d)
12

Description

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:
    image
  3. Press the left arrow key to run the stack
  4. Note that the highlighted stack is blurry:
    image
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in Chrome on a non-retina display using the default project, the arrow-key stack, and the listed hat variations. Compare highlighted blocks with non-highlighted blocks across the reproduction cases; done means the affected highlighted stacks render crisply without changing the cases that already render correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.