Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ebay-carousel): fix width calculation for last pill when font not loaded (#2344) #2352

Conversation

WinkeeFace
Copy link
Contributor

Description

This PR addresses the issue where the last pill in the ebay-carousel is partially hidden due to incorrect width calculation. The issue occurs because the width is calculated before the correct font (Market Sans) finishes loading, causing the fallback font (Arial) to be used during calculations.

The changes ensure the component waits for the font to be fully loaded before performing width calculations. This prevents rendering issues and ensures the correct width is applied.


Context

The bug was reproduced on production. However, since this is a rendering issue caused by width calculations happening before the font is loaded, it is nearly impossible to reliably test locally.

These changes introduce logic to:

  • Wait for the fonts to be ready.
  • Perform cleanup after the font is loaded.
  • Render the component correctly with the appropriate dimensions.

This approach ensures stability and resolves the issue effectively.


References


Screenshots

Before:
image

Screenshot not provided after the fix due to the nature of the rendering issue. The problem was reproduced in production, but it is difficult to capture accurately for testing locally.


Checklist

  • Bug has been reproduced and verified.
  • Visual regression testing has been completed (if applicable).
  • Changes have been tested with all supported browsers.
  • Changes align with the eBay UI guidelines.

Copy link

changeset-bot bot commented Dec 20, 2024

🦋 Changeset detected

Latest commit: 0debd3a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@ebay/ebayui-core Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@WinkeeFace WinkeeFace changed the base branch from master to 14.6.0 December 20, 2024 20:00
@WinkeeFace WinkeeFace force-pushed the 2344-ebay-carousel-the-last-pill-is-partially-hidden-due-to-wrong-width-calculation branch from 466335f to c182a12 Compare December 20, 2024 22:18
@WinkeeFace WinkeeFace force-pushed the 2344-ebay-carousel-the-last-pill-is-partially-hidden-due-to-wrong-width-calculation branch from c182a12 to 0debd3a Compare December 20, 2024 22:23
@agliga agliga merged commit a5b2e69 into 14.6.0 Dec 20, 2024
4 of 5 checks passed
@agliga agliga deleted the 2344-ebay-carousel-the-last-pill-is-partially-hidden-due-to-wrong-width-calculation branch December 20, 2024 23:05
This was referenced Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

<ebay-carousel>: the last pill is partially hidden due to wrong width calculation
2 participants