Highlighting doesn't work with menu expanded in v3

[HankAviator]

On Chrome 62.0.3202.94 with expanded menu
menu collapsed

On Edge 41.16299.15.0

Previous version works well on Chrome.

[gskinner]

I'm testing in the same version of Chrome (Win & Mac), and haven't seen this issue. Is there any chance you have any extensions that could be causing issues? Any errors in the console?

[HankAviator]

Is there any chance you have any extensions that could be causing issues?

No

Any errors in the console?

No

Maybe you can try maximize Chrome - then all highlights are gone.

[lsze]

Having the same issue in Chrome 63.0.3239.108 on Windows 10. Disabling extensions seems to make no difference. The only thing that appears to fix it is any kind of horizontal resizing of the window, whether that be by closing the Menu panel, manually dragging the window, or opening a side-docked Chrome Devtools. No errors in console btw.

It may be relevant that I am using a 4k monitor, as this issue is not present on my Windows laptop running the same version of Chrome. My resolution is set to 3840 x 2160 with 150% scaling.

[HankAviator]

Mine is 3200 x 1800 with 250% scaling, persists on Win 10 Chrome 63.0.3239.108

[ohaucke]

I've the same issue:
3840 x 2160 with 125% scaling (Operating System) in Chrome and in Firefox the initial highlighting is a bit off until i modify the value in the "Text" field

[wdamien]

I can reproduce this on a 1920 x 1080 display, @ 125%. Chrome needs to be maximized, and the menu open, for the highlights to disappear. For me it only happens when I have 2 monitors running, and the issue only appears on the monitor that is not my main display, in this case my laptop display. I cannot reproduce on my secondary monitor when using the same settings.

Windows 10 Home (1709)
Chrome 63.0.3239.84

[HankAviator]

So now we've got:

• maximized window
• Chrome
• Windows (10?)
• some hd display
• scaling > 100%

[gskinner]

Ok. So this is almost definitely a Chrome bug then. The question is, can we work around this? I can't repro on OSX, so I'll need to fire up Basecamp and test there. Hopefully I can take a look in the next few days.

[Thesharing]

Meet the same problem.

OS: Windows 10 1709
Browser: Chrome 63.0.3239.132 x64
Screen resolution: 2560*1440
Scaling: 175%

When maximize the window and leave toolbox open, highlight will disappear.

[hmol]

I also encountered the same problem
Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)
Screen resolution: 1920x1080
OS: Windows 10
Scaling: 100%

[HankAviator]

@hmol would you please confirm if it happens only when the window is maximised?

[hmol]

yes, confirmed!

[TimeDropsSB]

When maximize the window and leave toolbox open, highlight will disappear.

This was exactly it! Thanks for bringing it up - so glad I can use this tool again.

[gskinner]

Is this still an issue in newer versions of Chrome?

[HankAviator]

yes, it persists on Chrome 67.0.3396.79

[mahburg]

Also persisting in Chrome 68.0.3440.84

[max810]

Version 69.0.3497.100 here, still the same issue.
Window 10, 1920x1080, 150% scaling.
Appears only in either Chrome Fullscreen mode (f11) or in just a full window mode.

[gskinner]

Ok. I was finally able to reproduce this on my system, and I'm it here for future reference:

• Windows 10
• switch to 2560x1440 (on my 3440x1440 external monitor)
• 150% scaling in the OS, 100% in browser
• browser window maximized

Alternatively (same as above, but with):

• 100% scaling in the OS, 125% in browser

Alternatively:

• same 100/125, but at 3440x1440, and resize the browser horizontally until the highlights disappear
• ex. 2639 x 1359 works

With this info, I was able to reproduce on MacOS as well:

• Set Chrome scaling to 125%, manually resize window until highlights disappear (ex. 1822 wide seems to work)

Based on this, my immediate guess is some kind of rounding / math error either in our highlighting code, or in CodeMirror's text metric methods.

[gskinner]

Note that vertical size doesn't seem to matter, unless it causes a change in the horizontal size of the Text area. Also, that rollovers appear to trigger in the correct locations, which suggests the issues aren't with CodeMirror.

Canvas is being set to 1x1 for some reason. Investigating further.

[gskinner]

Ok. The issue here appears to be that at certain scales and dimension Chrome will return a width for our resize detector that will cause the parent container to show a scrollbar if the canvas is set to that width. This leads to another resize triggering, which resizes the canvas, which hides the scrollbar.

This resize loop is what was resulting in the highlights disappearing.

I found two fixes for this: overflow:hidden on the parent, or sizing the canvas 1px smaller. The latter seems more fragile and arbitrary, so I am going with the CSS solution.

This appears to be fixed locally. I will leave this issue open for the moment, and ask for help testing when I push it live.

[gskinner]

This fix has been pushed live in the v3.5.3 update. Please test and let us know if there are any lingering problems.

[max810]

I confirm, everything is working properly know, both in fullscreen/window adn with/without side menu.