jelmervdl / translatelocally-web-ext

TranslateLocally for the Browser is a web-extension that enables client side in-page translations for web browsers.
https://addons.mozilla.org/en-GB/firefox/addon/translatelocally-for-firefox/
Mozilla Public License 2.0
65 stars 3 forks source link

CSS inconsistencies with inline translation from text selection #74

Open tobozo opened 1 year ago

tobozo commented 1 year ago

Hi and thanks for that great project 👍

Problem:

In certain conditions (e.g. with general directive body { color: #fff }), the translated text may appear as white text on white background.

Possible cause:

The .translation area created to hold the translated text has a css directive font-color: inherit but the parent element does not specify any font-color directive.

image

As a result the translation area inherits its font-color from outside the web-extension context.

https://github.com/jelmervdl/translatelocally-web-ext/blob/main/src/content/SelectionTranslation.css#L27

[edit] Actually the parent element #x-bergamot-translation-popup specifies a css background-color value whereas it should also inherit.