Color dropdown may be incorrectly positioned on Firefox
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 641
- Avg merge
- 12h 4m
- Merged PRs (30d)
- 57
Description
I hit this pxt-ev3 issue after upgrading pxt-core from 12.3.10 to 12.3.14, and still have the problem on 12.3.16.
On Chrome everything works fine, but on Firefox the pxtblocks/fields/field_colour.ts dropdown gets positioned at the top left corner of the page instead of near the field.
I traced this down to borderRect having 0 width, which causes different behavior in browser getBoundingClientRect().
I have it fixed locally by forcing borderRect to have a width, and I'm not sure what change actually caused the problem to appear. I'm just posting this to save somebody time in case it affects other target platforms. Feel free to close if you consider this not a bug in the pxt-core and that this is something targets need to handle.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in pxtblocks/fields/field_colour.ts and inspect how the dropdown position is calculated from borderRect and getBoundingClientRect(). Reproduce the issue in Firefox, comparing the zero-width borderRect behavior with Chrome and the linked pxt-ev3 workaround; done means the color dropdown appears near its field on Firefox without regressing Chrome behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100