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.

Sign up for GitHub

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

Jump to bottom

Text is invisible in Firefox #179

Closed
TomatechGames opened this issue Feb 4, 2023 · 4 comments · Fixed by #249
Closed

Text is invisible in Firefox #179

TomatechGames opened this issue Feb 4, 2023 · 4 comments · Fixed by #249
Labels
a-core Relates to the core package b-bug Something isn't working c-accepted The issue is ready to be worked on

Comments

@TomatechGames
Copy link

Describe the bug
By default, Firefox has dom.textMetrics.fontBoundingBox disabled, meaning that Text components dont render at all (this includes the HTML embeds of Motion Canvas animations)

To Reproduce
In a fresh install of Firefox with default settings, try to view a scene that uses a Text component

Expected behavior
The text is displayed

Additional context
A workaround for users is to manually enable dom.textMetrics.fontBoundingBox within Firefox's config by typing about:config in the address bar
@aarthificial aarthificial added b-bug Something isn't working c-accepted The issue is ready to be worked on a-core Relates to the core package labels Feb 4, 2023
@aarthificial aarthificial removed their assignment Feb 4, 2023
@LegoGuy32109
Copy link

LegoGuy32109 commented Feb 5, 2023 •
edited

Would love to have this mentioned in the docs somewhere when following quickstart, or at the signals page https://motion-canvas.github.io/docs/signals

@Tandashi Tandashi mentioned this issue Feb 5, 2023
Merged
aarthificial pushed a commit that referenced this issue Feb 7, 2023
@Tandashi
docs: add info panels for firefox users (#195)
9e3c10d 
Since the Text is not rendered on Firefox when
`dom.textMetrics.fontBoundingBox` is not enabled an
info panel has been added to aid with confusion.

Issue: #179
This was referenced Feb 8, 2023
Closed
Merged
@n3oney
Copy link

n3oney commented Feb 8, 2023

I've found another text related bug that only happens on FF, so not sure if I should open a new issue or mention it here. Text wrapping doesn't work, it always renders on one line
image
chrome on the left, firefox on the right

(no matter if it's preformatted or auto-wrapping)

aarthificial pushed a commit that referenced this issue Feb 9, 2023
@exdeejay
fix(2d): fix #179 by replacing fontBoundingBoxDescent (#249)
20a4d65 
Replaces `fontBoundingBoxDescent` with `textBaseline = 'middle'`.
The Firefox text warning was removed.

WARNING: shifts all text down a little bit towards the middle, more noticeable on bigger text.
@aarthificial aarthificial mentioned this issue Feb 9, 2023
Closed
@exdeejay
Copy link
Contributor

exdeejay commented Feb 9, 2023

@n3oney can you make a separate issue with your reply?

@n3oney
Copy link

n3oney commented Feb 9, 2023

Sure.

@Tandashi Tandashi mentioned this issue Feb 11, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a-core Relates to the core package b-bug Something isn't working c-accepted The issue is ready to be worked on
Projects
None yet
Milestone
No milestone
5 participants
@exdeejay @n3oney @LegoGuy32109 @TomatechGames @aarthificial