# [Bug] Text Rendering Overlap in Art Studio – Duplicate Layer Issue #1131

New Issue

2026-08-28T19:48:13Z

enjin2310 commented

2026-08-28 19:48:13 +00:00

Summary

In the Art Studio tool, text elements appear broken or unreadable unless selected. This behavior suggests that duplicate or overlapping text layers are being rendered on top of each other, causing visual distortion.

Issue Description

While viewing generated assets in the Art Studio interface, all text (titles, labels, and metadata) appears faint or unreadable until highlighted. The issue affects multiple sections, including Concept, Modeling, Rigging, Animation, and Export. Selecting the text temporarily reveals it correctly, indicating that a duplicate rendering layer or transparency conflict may be present.

Environment

Property	Value
Application	SpikerSoft Learn
Module	Art Studio
Environment	Production
Browser	Firefox
Operating System	Windows 11
Version	v2026.08.28a
Device	Desktop

Preconditions

User must be logged in and have access to the Art Studio tool.

Steps to Reproduce

Log in to the SpikerSoft platform.
Navigate to Art Studio.
Open any generated asset or prompt result.
Observe the text in the Concept, Modeling, and History sections.
Select the text to reveal proper rendering.

Expected Result

Text should render clearly and consistently without requiring selection.

Actual Result

Text appears broken or invisible until selected.
Selecting the text temporarily fixes visibility.
The issue affects multiple UI sections simultaneously.

Evidence

The screenshot shows the Art Studio interface with unreadable text in the Concept and History sections.
The text becomes visible only when highlighted.

Impact

Reduces readability and usability of the Art Studio interface.
Makes it difficult to review asset metadata and workflow history.
Suggests a rendering or CSS layering issue.

Frequency

Always

Reproducibility

100%

Severity

Medium

Notes

The issue may be caused by overlapping text layers or incorrect z-index rendering in the CSS stack. It is recommended to verify the text rendering pipeline and ensure only one visible layer is active per text element.

## Summary In the **Art Studio** tool, text elements appear broken or unreadable unless selected. This behavior suggests that duplicate or overlapping text layers are being rendered on top of each other, causing visual distortion. ## Issue Description While viewing generated assets in the **Art Studio** interface, all text (titles, labels, and metadata) appears faint or unreadable until highlighted. The issue affects multiple sections, including **Concept**, **Modeling**, **Rigging**, **Animation**, and **Export**. Selecting the text temporarily reveals it correctly, indicating that a duplicate rendering layer or transparency conflict may be present. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Learn | | Module | Art Studio | | Environment | Production | | Browser | Firefox | | Operating System | Windows 11 | | Version | v2026.08.28a | | Device | Desktop | ## Preconditions User must be logged in and have access to the **Art Studio** tool. ## Steps to Reproduce 1. Log in to the SpikerSoft platform. 2. Navigate to **Art Studio**. 3. Open any generated asset or prompt result. 4. Observe the text in the **Concept**, **Modeling**, and **History** sections. 5. Select the text to reveal proper rendering. ## Expected Result Text should render clearly and consistently without requiring selection. ## Actual Result - Text appears broken or invisible until selected. - Selecting the text temporarily fixes visibility. - The issue affects multiple UI sections simultaneously. ## Evidence - The screenshot shows the **Art Studio** interface with unreadable text in the **Concept** and **History** sections. - The text becomes visible only when highlighted. ## Impact - Reduces readability and usability of the Art Studio interface. - Makes it difficult to review asset metadata and workflow history. - Suggests a rendering or CSS layering issue. ## Frequency Always ## Reproducibility 100% ## Severity Medium ## Notes The issue may be caused by overlapping text layers or incorrect z-index rendering in the CSS stack. It is recommended to verify the text rendering pipeline and ensure only one visible layer is active per text element.

Screenshot 2026-08-28 154540.png

202 KiB

spikerj commented

2026-09-06 23:47:24 +00:00

Looked for this in the code and could not pin it down without a picture. There is no duplicate text layer in the Art Studio templates — each stage label is rendered once — and no mix-blend-mode, background-clip: text or -webkit-text-fill-color rule that Firefox would render differently. What the panels DO use is --text-tertiary / --text-secondary on glass (backdrop-filter: blur) surfaces, which is the most likely explanation of "faint until highlighted": low-contrast text on a translucent panel, not a rendering bug — and it would look worse in the light theme.

To fix the right thing I need one thing from you: a screenshot of the Art Studio pipeline view as you see it (before selecting any text), plus whether the site theme was light or dark and whether Firefox was at 100% zoom. With that I can measure the actual contrast and either raise the token or fix the panel. Until then this stays open as unreproduced — I only have Chromium here, and there it renders normally.

Looked for this in the code and could not pin it down without a picture. There is no duplicate text layer in the Art Studio templates — each stage label is rendered once — and no `mix-blend-mode`, `background-clip: text` or `-webkit-text-fill-color` rule that Firefox would render differently. What the panels DO use is `--text-tertiary` / `--text-secondary` on glass (`backdrop-filter: blur`) surfaces, which is the most likely explanation of "faint until highlighted": low-contrast text on a translucent panel, not a rendering bug — and it would look worse in the light theme. To fix the right thing I need one thing from you: a screenshot of the Art Studio pipeline view as you see it (before selecting any text), plus whether the site theme was light or dark and whether Firefox was at 100% zoom. With that I can measure the actual contrast and either raise the token or fix the panel. Until then this stays open as unreproduced — I only have Chromium here, and there it renders normally.

spikerj referenced this issue from a commit

2026-09-13 21:29:21 +00:00

fix(art-studio): stop History › Timing event labels piling on top of each other

spikerj commented

2026-09-13 21:30:17 +00:00

Correction to my previous comment. I asked you for a screenshot, but you had already attached one, and it pins the bug down. Thank you, and sorry for the extra round-trip.

Confirmed: the overlapping text is real. Your screenshot is the History → Timing tab. Its lifecycle labels are drawn on top of each other (export-startedenrichment-started, animation-completedexport-completedenrichment-comple…), and the last one is cut off at the right edge. You described it as "duplicate layers", and that is what it looks like. The actual cause is that the chart gave every event its own label but had only two rows to put them in. A full run produces about 24 events, and many land within a second of each other, so the labels piled up. It happens the same way in every browser, so my earlier low-contrast / Firefox theory was wrong.

Filed as spikerj/spikersoft-angular#1070
Fix is in review as spikerj/spikersoft-angular#1071. Events that happen together now share one label, labels spread over as many rows as they need, and nothing is cut off at the edges. Hovering a dot still shows each individual event.

Not confirmed: "all text is faint until highlighted." In the same screenshot, the stage/method row (Concept stabilityai/… Modeling pixal3d Rigging blender …), the prompt and the headings all render clearly. If you see faint text somewhere other than the Timing chart, please send a screenshot of that specific spot and I'll treat it as a separate issue.

This ticket stays open until #1071 is merged and deployed. Once it's live, please re-check the Timing tab on an asset with a full pipeline run.

Correction to my previous comment. I asked you for a screenshot, but you had already attached one, and it pins the bug down. Thank you, and sorry for the extra round-trip. **Confirmed: the overlapping text is real.** Your screenshot is the **History → Timing** tab. Its lifecycle labels are drawn on top of each other (`export-startedenrichment-started`, `animation-completedexport-completedenrichment-comple…`), and the last one is cut off at the right edge. You described it as "duplicate layers", and that is what it looks like. The actual cause is that the chart gave every event its own label but had only two rows to put them in. A full run produces about 24 events, and many land within a second of each other, so the labels piled up. It happens the same way in every browser, so my earlier low-contrast / Firefox theory was wrong. - Filed as spikerj/spikersoft-angular#1070 - Fix is in review as spikerj/spikersoft-angular#1071. Events that happen together now share one label, labels spread over as many rows as they need, and nothing is cut off at the edges. Hovering a dot still shows each individual event. **Not confirmed: "all text is faint until highlighted."** In the same screenshot, the stage/method row (`Concept stabilityai/… Modeling pixal3d Rigging blender …`), the prompt and the headings all render clearly. If you see faint text somewhere *other than* the Timing chart, please send a screenshot of that specific spot and I'll treat it as a separate issue. This ticket stays open until #1071 is merged and deployed. Once it's live, please re-check the Timing tab on an asset with a full pipeline run.

spikerj commented

2026-09-27 05:06:58 +00:00

Closing in the 2026-09-27 tracker sweep — already implemented.

Closing: the overlapping text in your screenshot was the History > Timing chart stacking about 24 event labels into two rows. spikerj/spikersoft-angular#1071 (merged and deployed) groups simultaneous events and spreads labels across rows. The broader 'faint until selected' symptom wasn't reproducible, so please open a new ticket with a screenshot if you see it elsewhere.

Reopen if this still needs work.

Closing in the 2026-09-27 tracker sweep — already implemented. Closing: the overlapping text in your screenshot was the History > Timing chart stacking about 24 event labels into two rows. spikerj/spikersoft-angular#1071 (merged and deployed) groups simultaneous events and spreads labels across rows. The broader 'faint until selected' symptom wasn't reproducible, so please open a new ticket with a screenshot if you see it elsewhere. Reopen if this still needs work.

spikerj closed this issue

2026-09-27 05:06:58 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1131