Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

10ten and Google Translated page don't play well together on hover #1398

Open
ndobb opened this issue Oct 27, 2023 · 2 comments
Open

10ten and Google Translated page don't play well together on hover #1398

ndobb opened this issue Oct 27, 2023 · 2 comments

Comments

@ndobb
Copy link

ndobb commented Oct 27, 2023

First thing - this is a wonderful extension I use daily, thank you!

I've noticed that when I read a Google Translated page, for example

...that if 10ten reader is enabled, hovering over text oddly causes the original English text to appear immediately after each translated sentence across the whole document.

With 10ten reader on:
yes10ten

With 10ten reader off:
no10ten

10ten reader and Google Translate both show a translation modal on hover, so I suspect there is a timing- or HTML element-overlap issue between them which causes the issue.

OS: macOS v12.4
Browser: Firefox v119.0
@ndobb ndobb changed the title 10ten breaks Google Translated page on hover 10ten and Google Translated page don't play well together on hover Oct 27, 2023
@birtles
Copy link
Member

birtles commented Oct 28, 2023

Oh, that's interesting. I think I know what's happening.

In Firefox beta/release and Safari, 10ten indicates the looked-up text by selecting it. However, if you select text in a Google translated webpage, Google Translate takes that as a cue to show the source text. You can see that if you turn off 10ten and just click the paragraph.

In Firefox Nightly and Chrome and Edge which support the CSS highlight API we can avoid selecting the text by showing a highlight and the problem doesn't reproduce.

As a temporary workaround you can either:

  • Enable the CSS highlight API by going to about:config and toggling the dom.customHighlightAPI.enabled setting, or

  • Disable text selection in the 10ten options:

    image

I hope Firefox will ship that API soon (tracking bug) but I'm not sure about Safari. Safari have an implementation but it is currently disabled.

Until that happens we could try to work around this.

Looking at that page, I can see there is are two selectionchange event handlers on the <html> element, one capture phase and one bubble phase.

If I locate one of the <p> elements in the body, then enter window.getSelection().setBaseAndExtent($0, 0, $0, 1) all the English text pops up demonstrating that it is the selectionchange event handler that is triggering this behavior.

Fortunately that appears to be caused by the bubble phase event handler so we could try to catch the selectionchange event and call stopPropagation() on it. We probably wouldn't want to do that everywhere but if Google Translate contents are always served from *.translate.goog we could just apply it there. Furthermore, we'd only do it when we triggered a change in text selection.

@ndobb
Copy link
Author

ndobb commented Oct 28, 2023

Brilliant! Thank you so much for the quick reply. Setting dom.customHighlightAPI.enabled does indeed do the trick as workaround for now.

@birtles birtles mentioned this issue Nov 27, 2023
Closed
11 tasks
@birtles birtles mentioned this issue Dec 6, 2023
Closed
7 tasks
@birtles birtles mentioned this issue Feb 26, 2024
Closed
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@birtles @ndobb