Overlapping Text with Material Symbols in Google AI Studio (Opera GX Browser)

[shahriar_sadeghi]

Subject: Overlapping Text with Material Symbols in Google AI Studio (Opera GX Browser)

Description:

I am experiencing overlapping text in Google AI Studio, specifically with the Material Symbols. This issue appears to be related to the use of the Google Symbols font in both light and dark themes. The overlapping occurs with symbols rendered using the .material-symbols-outlined class.

Steps to Reproduce:

1. Open Google AI Studio in Opera GX Browser (Early Access - Details below).
2. Navigate to any area where Material Symbols are used in the UI (e.g., the menu, buttons, labels in the main workspace).
3. Observe that in certain areas, the symbols on subsequent lines visually overlap with symbols on previous lines, making the text difficult to read. This issue is present in both light and dark themes.

Observed Behavior:

Material Symbols are rendered with excessive vertical height and insufficient line spacing, causing glyphs on consecutive lines to visually overlap and create illegible text.

Cause Identified (Through DevTools Investigation):

After inspecting the elements in browser developer tools (Opera GX DevTools), I’ve identified that the issue is strongly related to the font-family: "Google Symbols"; being applied in the CSS. The CSS rule is within the main stylesheet and also in @media (prefers-color-scheme: dark) and .dark-theme blocks targeting .material-symbols-outlined elements.

The computed line-height is extremely tight (effectively line-height: 1; or the inherited value which is also very low), and this, in combination with the "Google Symbols" font, is causing the vertical overlap.

The display property is correctly computed as inline-block;.
The white-space-collapse is collapse which may also contribute to the issue

Workaround (Temporary - Confirmed in DevTools):

1. Font Family Change (Best Temporary Fix): In DevTools, if I change the font-family in the @media (prefers-color-scheme: dark) block (and the base .material-symbols-outlined rule if necessary) from font-family: "Google Symbols"; to font-family: 'Material Symbols Outlined';, the overlapping issue is resolved. The layout then renders correctly using the ‘Material Symbols Outlined’ font.
2. Line Height Increase (Alternative Temporary Fix): Alternatively, increasing the line-height to a larger value (e.g., line-height: 1.5; or line-height: normal;) in the original CSS for .material-symbols-outlined also resolves the overlapping, while keeping font-family: "Google Symbols";.

Browser and OS Information:

• Browser with Problem: Opera GX, Early Access

  • Update stream: Early Access
  • Core: 116.0.5366.118
  • System: Windows 10 64-bit
  • Chromium version: 131.0.6778.266
  • Browser identification: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 OPR/116.0.0.0

• Rendered Font Information (Problem Browser - for .material-symbols-outlined element):

  Rendered Fonts
  Family name: Google Symbols Filled 36pt Light
  PostScript name: GoogleSymbolsFilled36pt-Light
  Font origin: Network resource (17 glyphs)
  

Suggestion for Fix (Possible Options for Google Developers):

1. (Recommended) Increase line-height: Increase the line-height for the .material-symbols-outlined class, especially within the dark theme and when using the "Google Symbols" font. Values like line-height: 1.5; or line-height: normal; might be sufficient to accommodate the font’s metrics and prevent overlap across different browsers and OSs.

2. (Alternative Workaround) Font Consistency: Consider using 'Material Symbols Outlined' font consistently across all themes instead of switching to "Google Symbols" in the dark theme, if the visual difference is acceptable. Or, thoroughly test and ensure both fonts render consistently across browsers and themes with appropriate line-height.

3. Investigate white-space-collapse: Check if the white-space-collapse: collapse; CSS property (or its default behavior) is contributing to the tight vertical spacing or rendering issues in combination with the font and line-height: 1. Consider if white-space-collapse: preserve; might be more appropriate in this context.

Thank you for investigating this issue.

[TheDerevtso]

Wrote little script for TamperMonkey.

Google AI Studio, Fix Google Symbols Rendering for Opera

[Ethan_Chang]

This is great, Thanks.