uetchy/Polyglot

Popup with translation can be broken by styles of page where it is open

davidyuk opened this issue · 0 comments

davidyuk commented

Describe the bug
Popup with translation in some cases can be broken by the styles of the page where it is open.

To Reproduce

  1. Go to example.com
  2. Select some text to translate
  3. See a popup with extra padding like on the screenshots below

Expected behavior
A popup without extra paddings.

Screenshots
Screenshot 2021-02-28 at 20 18 41

Version:

  • Safari 14.0.3
  • Polyglot 3.3.0
  • macOS 11.2.1

Additional context
Instead of the current styles isolation approach (polyglot namespace and !important) I'm proposing to put popups into a shadow DOM (part of Web Components API) this should allow completely isolate styles of extension's popups from the styles of the opened page. Web Components seems to be well-supported by the latest versions of Safari.