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

Scale with text overflow hidden unless using background clip #648

Open
vinnymac opened this issue Nov 19, 2024 · 0 comments
Open

Scale with text overflow hidden unless using background clip #648

vinnymac opened this issue Nov 19, 2024 · 0 comments

Comments

@vinnymac
Copy link

vinnymac commented Nov 19, 2024

Bug report

Description / Observed Behavior

When applying ellipsis styles I noticed that text was disappearing if I also used a scale transform.

Removing either the ellipsis styles or the transform fixes the issue. Applying a background clip also shows the text.

Narrowing the issue down further, it appears to happen when using both overflow: hidden and transform: scale() at the same time.

Expected Behavior

I would have expected the transform to apply without the text being hidden.

Reproduction

🐛 with overflow hidden & transform

✅ Only transform

✅ Only overflow hidden

Revealed by background clip

Additional Context

Could this be related to #639?

Satori v0.12.0 and v0.11.3

I haven't yet tested older versions (does the playground support changing the version?)

My current workaround uses @shuding/opentype.js to measure the font width of every character and rendering the ellipsis myself instead when utilizing a scale transform.

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

No branches or pull requests

1 participant