search

alpheios-project / arethusa

Arethusa: Annotation Environment
http://sosol.perseids.org/tools/arethusa
MIT License
34 stars 26 forks source link

Not enough spacing between words #826

Open zfletch opened 3 years ago

zfletch commented 3 years ago

There seems to be an issue with word spacing for some users where words run together or overlap. @vgorman1 gave an example: this tree looks like the screenshot below on her version of Chrome.

I'm having trouble replicating the issue on my machine. If I had to guess, I would say that Chrome on Windows changed some behavior related to <svg>s and it is causing problems for Dagre-d3's layout engine.

screenshot

balmas commented 3 years ago

ugh. I can try to reproduce in windows. will report back.

zfletch commented 3 years ago

Thanks! I will also have access to a lower resolution monitor and Windows machine next week. I hope there is an easy fix because this issue could cause problems for a majority (or at least a plurality) of users.

zfletch commented 3 years ago

I was able to replicate this (I think) on Windows 7 and Chrome 87.0.4280. When the browser is zoomed in or zoomed out, the spacing between the words is not correct. This does not occur with Chrome on macOS. The good news is that this shouldn't be a widespread issue. The bad news is that I don't think there's an easy fix.

Zoomed in:

zoomed-in

Zoomed out:

zoomed-out

balmas commented 3 years ago

does it happen with the new react tree viewer too?

vgorman1 commented 3 years ago

I do not know what that is?

Vanessa B. Gorman Professor of Ancient History Department of History 619 Oldfather Hall University of Nebraska-Lincoln Lincoln, NE 68588-0327 https://vgorman1.github.io/

From: Bridget Almas notifications@github.com Sent: Monday, November 30, 2020 9:41 AM To: alpheios-project/arethusa arethusa@noreply.github.com Cc: Vanessa Gorman vgorman1@unl.edu; Mention mention@noreply.github.com Subject: Re: [alpheios-project/arethusa] Not enough spacing between words (#826)

does it happen with the new react tree viewer too?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_alpheios-2Dproject_arethusa_issues_826-23issuecomment-2D735864289&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=pXolTOGr6cqSEu3v94jUIRko6bv_LShRrosOFdtmV1s&s=z6DzBKe6Th-UTXOz-2UC7rM5tdHqfxkh3pA5XNhao6Y&e=, or unsubscribehttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ACPTZUQRCGRNONFD3HRA5C3SSO4J5ANCNFSM4UBMPEOQ&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=pXolTOGr6cqSEu3v94jUIRko6bv_LShRrosOFdtmV1s&s=-5oygyK8_0p7k3bhoyYYR3q_UFnBpwHaXoKqtso1yIM&e=.

balmas commented 3 years ago

It's the new version of the viewer that @zfletch is working on for the treebank publication template. I think he should be able to confirm whether or not it does. If so, it wouldn't really help with the problem while editing, but it might help us narrow down further the cause or a solution.

zfletch commented 3 years ago

It looks like the same thing does happen with the React Treebank viewer.

There might be multiple issues here and I may not have been able to replicate the original one. @vgorman1 said that this behavior occurs on all zoom levels, even when zoomed less than 100%.

balmas commented 3 years ago

I can reproduce it in Arethusa with Vanessa's tree in Chrome 87 on Windows 10. It does appear to have been introduced in either Chrome 86 or 87 because I could not in Chrome 85.

@zfletch do you already have that tree loaded in the treebank template somewhere that I could test quickly?

zfletch commented 3 years ago

I've added the tree to the Treebank React GitHub pages site: https://perseids-tools.github.io/treebank-react/.

Does the issue happen even when not zoomed in? It's strange that it would happen to both you and Vanessa but not on my machine.

balmas commented 3 years ago

It seems only to happen if the page loads while in Zoom. If I set the zoom to 100% and reload, the problem goes away. In both the react viewer and arethusa. There are a few other people reporting bugs in Chrome 87 with SVG:

https://bugs.chromium.org/p/chromium/issues/detail?id=1153605 https://bugs.chromium.org/p/chromium/issues/detail?id=1153600

Perhaps we should report it?

balmas commented 3 years ago

for @vgorman1 , it would be good to know if you see the same thing. I.e reset the zoom level on the page in your browse to 100%, reload the page, and see if the display problem is fixed (even when zooming again)

vgorman1 commented 3 years ago

Still there, no matter resetting zoom, reloading, clearing browser history, etc.

Vanessa B. Gorman Professor of Ancient History Department of History 619 Oldfather Hall University of Nebraska-Lincoln Lincoln, NE 68588-0327 https://vgorman1.github.io/

From: Bridget Almas notifications@github.com Sent: Monday, November 30, 2020 10:46 AM To: alpheios-project/arethusa arethusa@noreply.github.com Cc: Vanessa Gorman vgorman1@unl.edu; Mention mention@noreply.github.com Subject: Re: [alpheios-project/arethusa] Not enough spacing between words (#826)

for @vgorman1https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_vgorman1&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=_SWqWgJ0YLYawd_W3CvzEPkwYeV_4ro8vC586G6ndTA&s=5FgNgBG2klc4ijy8DnE1QpSCvzL5KIzjx9ynHx86jJ8&e= , it would be good to know if you see the same thing. I.e reset the zoom level on the page in your browse to 100%, reload the page, and see if the display problem is fixed (even when zooming again)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_alpheios-2Dproject_arethusa_issues_826-23issuecomment-2D735903699&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=_SWqWgJ0YLYawd_W3CvzEPkwYeV_4ro8vC586G6ndTA&s=G0ntiz-63W_eWu3vbG_61nqxfGro3kiLksWpckXG6HU&e=, or unsubscribehttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ACPTZUQYDYJXG4QL7H74UB3SSPD3RANCNFSM4UBMPEOQ&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=_SWqWgJ0YLYawd_W3CvzEPkwYeV_4ro8vC586G6ndTA&s=-uQxgJcDAsM1PBHmQXJoCTeCB-qKoY7VkszxdeDRwP8&e=.

balmas commented 3 years ago

@zfletch I'll still try to reduce it down to something that I can reproduce outside of either application (i.e. with just the SVG and CSS), and if so, I'll submit a bug to the Chromium bug tracker. It's clear something changed with their SVG renderer and we're not the only ones having problems.

balmas commented 3 years ago

FYI, testing with the treebank-react display, I cannot reproduce it with just the svg and the css. Only if I add in the javascript for the app am I able to see the problem. So there is probably some interaction with the tree drawing javascript at play here too. (I couldn't confirm this with Arethusa for which it is too muck work to get an extracted display).

zfletch commented 3 years ago

I think it is likely a Dagre-d3 issue involving size calculation (at least partially). I had some problems with Dagre-d3 resizing as I was developing treebank-react and the incorrect graphs look pretty similar.

I wonder if it could be related to this issue.

zfletch commented 3 years ago

I think this is related to display scaling. I'm able to replicate the issue on my Windows machine when I increase the scaling and restart the computer. It's still a mystery why this only happens on Chrome in Windows.

balmas commented 3 years ago

that's interesting.

One of the other SVG bugs reported against Chrome 87 has been tracked down to this change, https://chromium.googlesource.com/chromium/src/+/023c33f1a8a1556a46d5c41c3ac5a632bc84bdb6 , which from its description sounds like it could also be relevant for our bug. (in that it's affecting the way the bounds of the rects are handled during layout)

zfletch commented 3 years ago

I think the best thing we can do in this situation is wait a few weeks to see if the Chrome team fixes the bug(s). If it's still not addressed after some time, we can look into making a pull request to Dagre or Chromium.