Polyglot icon indicating copy to clipboard operation
Polyglot copied to clipboard
verified publisher icon uetchy

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

Open davidyuk opened this issue 4 years ago • 0 comments

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.

davidyuk avatar Feb 28 '21 17:02 davidyuk