Selection jiggles as you resize horizontally

[njx]

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.

[njx]

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

[marijnh]

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.

[peterflynn]

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]

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.

[njx]

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]

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

[gruehle]

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]

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?

[gruehle]

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