search

wickedest / Mergely

Merge and diff documents online
http://www.mergely.com
Other
1.18k stars 228 forks source link

The connection line between left and right difference is displayed in unaligned situations When I zoom in/out the browser #152

Closed baobaodz closed 3 years ago

baobaodz commented 3 years ago

Hello, I have some problems with alignment. The connection line between left and right difference is displayed in alignment when the browser is 100%. When I zoom in/out the browser , especially when I zoom in/out to 70-80%, there will be some unaligned situations. See the following figure which is 80% zooming. pic

Is this a problem? ps: Google Chrome version: 91.0.4472.114

I would appreciate it if you could help me.

wickedest commented 3 years ago

I don't see that on https://editor.mergely.com, so I think there might be styles/fonts or elements that you added that is disrupting the alignment. Some libraries can effect global styles/fonts. On startup, Mergely calculates the height of a normal line and uses that for rendering. I'd recommend you disable all styles, and libraries that are not mergely related until you find the issue.

baobaodz commented 3 years ago

Sorry, what I expressed may not be clear. I use the Ctrl+mouse wheel for scaling the page size instead of resizing the browser window. I found that when I scaled in from 100% to 80% on https://editor.mergely.com, the unaligned phenomenon was more obvious. Please try. diff

wickedest commented 3 years ago

@baobaodz, confirmed the issue and pushed a fix. the issue was that mergely caches the line-height of the editor, but didn't recalculate it on resize. usually, it doesn't have to, but clearly, when zooming, it does. now, on resize, the line-height will be recalculated.