Selection jiggles as you resize horizontally

marijnh commented

2012-08-23 20:32:38 +02:00

(Migrated from gitlab.com)

Found on Mac in Chrome 21 on Lion.

Open http://codemirror.net/demo/theme.html
Select some text in the middle of a line in the sample code (e.g. if (start > goal))
Resize the browser smaller horizontally and watch the selection highlight as the browser forces the editor's width to be smaller

Result: The selection jiggles during the resize.

Found on Mac in Chrome 21 on Lion. 1. Open http://codemirror.net/demo/theme.html 2. Select some text in the middle of a line in the sample code (e.g. `if (start > goal)`) 3. Resize the browser smaller horizontally and watch the selection highlight as the browser forces the editor's width to be smaller Result: The selection jiggles during the resize.

marijnh commented

2012-08-23 20:32:52 +02:00

(Migrated from gitlab.com)

b38776d alleviated this somewhat, but it still occurs in this case.

b38776d alleviated this somewhat, but it still occurs in this case.

marijnh commented

2012-08-23 20:38:02 +02:00

(Migrated from gitlab.com)

mentioned in issue #1283

marijnh commented

2012-08-23 21:07:41 +02:00

(Migrated from gitlab.com)

I haven't found a way to prevent this. Or rather, I have (setting the width instead of the right of the selection divs), but that just pushes the problem to another area -- if you drag a selection from right to left, it's right edge will wobble because of similar rounding inprecisions. See also the discussion in #322.

marijnh commented

2012-08-23 22:39:18 +02:00

(Migrated from gitlab.com)

Prior to beadea5 lineSpace had a fixed width rather than a min width, which prevented the bug even though the selection div still used right instead of width. That doesn't support the 'widthForcer' fix to #550, but I wonder if there's an alternative fix that would let you go back to a fixed-width lineSpace? E.g. if the cursor width was measured in advance, could that just be taken into account in measureLine() or in the endOperation() code that calls it?

Prior to beadea5 lineSpace had a fixed width rather than a min width, which prevented the bug even though the selection div still used right instead of width. That doesn't support the 'widthForcer' fix to #550, but I wonder if there's an alternative fix that would let you go back to a fixed-width lineSpace? E.g. if the cursor width was measured in advance, could that just be taken into account in measureLine() or in the endOperation() code that calls it?

marijnh commented

2012-08-24 12:45:00 +02:00

(Migrated from gitlab.com)

Another possible angle (not sure whether it works, but I used it to solve a similar single-px wobble in another situation) is to move some of our uses of offsetLeft/offsetTop over to getBoundingClientRect. On Chrome, the former return rounded pixels, whereas the latter return fractional values, so that you can use them for more precise positioning.

Another possible angle (not sure whether it works, but I used it to solve a similar single-px wobble in another situation) is to move some of our uses of offsetLeft/offsetTop over to `getBoundingClientRect`. On Chrome, the former return rounded pixels, whereas the latter return fractional values, so that you can use them for more precise positioning.

marijnh commented

2012-08-24 17:49:51 +02:00

(Migrated from gitlab.com)

One thing to note is that the wobble isn't a single pixel--it appears to be multiple characters' worth, at least on my machine.

marijnh commented

2012-08-24 17:56:10 +02:00

(Migrated from gitlab.com)

Ah, right, Glenn also mentioned that in the other discussion -- but I never was able to reproduce that.

marijnh commented

2012-08-28 18:55:03 +02:00

(Migrated from gitlab.com)

FYI - here is the other discussion: #333

It includes a screencast that shows the problem (this is an old screencast, but the steps to repro and results are still the same):
http://youtu.be/UQAeGs9k73A

FYI - here is the other discussion: #333 It includes a screencast that shows the problem (this is an old screencast, but the steps to repro and results are still the same): http://youtu.be/UQAeGs9k73A

marijnh (Migrated from gitlab.com) closed this issue

2012-09-18 15:23:39 +02:00

marijnh commented

2012-09-18 15:24:54 +02:00

(Migrated from gitlab.com)

The trick with getBoundingClientRect rather than offsets seems to have done the trick. It allows me to set a width on the selection divs, which wasn't workable before because sub-pixel positioning would cause a (very annoying) 1px wobble when selecting.

Could you double-check that it also works for you?

The trick with `getBoundingClientRect` rather than offsets seems to have done the trick. It allows me to set a `width` on the selection divs, which wasn't workable before because sub-pixel positioning would cause a (very annoying) 1px wobble when selecting. Could you double-check that it also works for you?

marijnh commented

2012-09-18 18:30:44 +02:00

(Migrated from gitlab.com)

Yes, that fixes the problem I was seeing. Thanks!

marijnh commented

2021-08-29 18:26:08 +02:00

(Migrated from gitlab.com)

mentioned in issue #1264

Rows
Columns

Selection jiggles as you resize horizontally #745