1383483 - Set white background to the #source iframe

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, enhancement, P2)

Description

[Théo Chevalier]

Some web projects are taking advantage of the fact that by default, the background color of an html element is white.

When loading projects in an iframe for in-context localization, we can see Pontoon dark background in the in-context view, and it makes it hard to read.

Examples: 
https://pontoon.mozilla.org/fr/thimble/Features/
https://pontoon.mozilla.org/fr/thimble/Get%20involved/
https://pontoon.mozilla.org/fr/mozilla-advocacy/Activity%20-%20Contribute%20To%20The%20Commons/


I think we should set a white background to the iframe element, if that’s doable, or add a white div behind the iframe to replicate the default behavior for web pages.

Comment 1

[Matjaz Horvat [:mathjazz]]

To clarify, the issue is that once 3rd party pages are loaded inside an iframe (which is transparent), they use the background color of Ponton's body element (#272a2f) if they don't set it explicitly (instead of the default browser background color of #FFFFFF).

We should fix that by setting the background color of the #source iframe to #FFFFFF. That can be done in the translate.css file.

Comment 2

[gupta.shreya1203]

Hi, I tried adding background-color in #source iframe to #FFFFFF but to check the effect , i am unable to go to the links mentioned above. I can only find pontoon-intro in my current projects. When i search "Thimble", I get no results. How can i go to these links in my local?

Comment 3

[Matjaz Horvat [:mathjazz]]

That should work. The easiest way to test locally might be to change the CSS of the pontoon-intro (both CSS files) to not set any background color on any element.

Comment 4

[[github robot]]

Commit pushed to master at https://github.com/mozilla/pontoon

https://github.com/mozilla/pontoon/commit/ddd9f97e41bf79878f20846da9f1fe465b158ab2
Fix bug 1383483: Set #source iframe background to white (#675)