Fix layout break when Chrome translate is enabled on iOS (`display: none`) (!241406) · Merge requests · GitLab.org / GitLab

What does this MR do and why?

Fixes Layout breaks when Chrome translate is enabled ... (#602395 - closed). Likely introduced in Fix layout on small screens (!205817 - merged).

Cause

Chrome’s built-in translation feature injects a #goog-gt-tt like this into <body>:

<div id="goog-gt-tt" class="VIpgJd-yAWNEb-L7lbkb skiptranslate" data-id="">
  <div id="goog-gt-vt">
    <div>
      <div>原文</div>
    </div>
    <div>
      <div>
        <div>この翻訳を評価してください</div>
        <div>いただいたフィードバックは Google 翻訳の改善に役立てさせていただきます</div>
      </div>
      <div>
        <button id="goog-gt-thumbUpButton" type="button" title="良い翻訳"></button>
        <button id="goog-gt-thumbDownButton" type="button" title="悪い翻訳"></button>
      </div>
    </div>
  </div>
</div>

Google's own CSS sets it to display: none.

However, the Console tab via Web Inspector on iOS showed the following GitLab CSP violation blocking its CSS:

Refused to load https://www.gstatic.com/_/translate_http/_/ss/k=translate_http.tr.zZZZhVqDDCw.L.W.O/am=BBBAEw/d=0/rs=AN8SPfpg2wPCELPSNQ-JdhuRpXMrWQt6Ow/m=el_main_css because it does not appear in the style-src directive of the Content Security Policy.

As a result, display: none never applies.

Approach

GitLab's CSS now sets display: none on #goog-gt-tt.

Alternatively, adding gstatic.com to the CSP style-src is also an option.

Screenshots

Visually verified on a physical iPhone against GDK-in-a-box.

Before	After

How to set up and validate locally

How do GitLab frontend developers usually test mobile-specific issues that require a physical device?

I verified this change on iPhone by setting up a local DNS server to make GDK-in-a-box accessible from the phone.

Notes

I don't work on the frontend regularly — feel free to tweak the CSS as needed.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Fix layout break when Chrome translate is enabled on iOS (`display: none`)