Closed Bug 1949112 Opened 9 months ago Closed 8 months ago

canva.com - The "Make upgrade" button overlays on the title

Categories

(Web Compatibility :: Site Reports, defect, P2)

Tracking

(Webcompat Priority:P2, Webcompat Score:6)

RESOLVED INVALID
Webcompat Priority P2
Webcompat Score 6

People

(Reporter: railioaie, Unassigned)

References

()

Details

(Keywords: webcompat:needs-diagnosis, webcompat:needs-login, webcompat:site-report, Whiteboard: [webcompat:sightline])

User Story

platform:android
impact:significant-visual
configuration:general
affects:all
branch:release
diagnosis-team:layout
user-impact-score:200

Attachments

(1 file)

Environment:
Operating system: Android
Firefox version: Nightly 137.0a1-20250218093115

Preconditions:

  • Clean profile

Steps to reproduce:

  1. Navigate to: https://www.canva.com/dream-lab
  2. Observe

Expected Behavior:
The title is displayed correctly

Actual Behavior:
The "Make upgrade" button overlays on the title (see attachments)

Notes:

  • Reproducible on the latest Firefox Release and Nightly
  • Works as expected using Chrome
  • Issue found during WebCompat team [Top100] websites testing

Attached image Screenshot_214.png
Whiteboard: [webcompat:sightline]
Severity: -- → S4
User Story: (updated)
Webcompat Priority: --- → P2
Webcompat Score: --- → 6
Priority: -- → P2
See Also: → 1845917

Can you still reproduce this? If so, could you attach a screenshot showing the Chrome rendering on the same device?

On my Pixel 6a, Firefox and Chrome look essentially identical (with no overlap).
On Desktop with RDM, I can force overlap in Firefox as well as Chrome if I make my viewport skinny enough.

I think part of the reason you're seeing overlap on your actual phone is because the text is wider for you than it is for me -- the label at the top right is just "Upgrade" for me, whereas it's "Make Upgrade" for you which is substantially wider.

I think maybe that's because you activated translations perhaps? Your screenshot shows the translations icon in purple, in your toolbar, which indicates that some translation has been done. So I think that the translations (specifically the fact that "Make Upgrade" is a wider string than the site is expecting) is the reason for the issue here.

I'm closing as INVALID given that last paragraph, but please reopen if you are still seeing this (without artifacts introduced by translations swapping in potentially-wide text).

Status: NEW → RESOLVED
Closed: 8 months ago
Flags: needinfo?(railioaie)
Resolution: --- → INVALID

hi, It is not reproducible anymore. Thank you!

Flags: needinfo?(railioaie)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: