protectwise / troika

A JavaScript framework for interactive 3D and 2D visualizations

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

troika-three-text issues in Chrome 114?

MaxTwentythree opened this issue · comments

Hello :)
Today I encountered a strange issue with troika-three-texts in my app:
Without having changed anything in the last days (no new deployment of our application), since today suddenly all 3D texts were shifted downwards in the y-axis.
I found out that it's fixed more or less when I update to the newest troika-three-text version, set lineHeight to 1 (I hadn't set it before) and setting anchorY to "top-ex" .. "middle" doesn't seem to work anymore. Percent values for anchorY also don't seem to work. top-ex doesn't center values so it's not really a fix, but good enough for me now.
I see the problem only on Chrome .. I'm on the current version: 114.0.5735.198 (Official Build) (arm64) I tried it in Firefox, Safari and Edge and it works.
After "fixing" the y-axis displacement issue there's still an issue in Chrome where text just disappears when it's close or near to the camera.
Currently I'm super confused .. as I said, it broke without me changing anything, so my current best guess is that Chrome changed something?
I'm mostly wondering if anyone else is having similar issues?

Which exact version of troika-three-text are you using? I'm not seeing any issues with anchorY 'middle' with that same Chrome version, can you maybe provide a testcase on Codesandbox or similar?

I'm now on 0.48.0-unicode.3 .. when I encountered the problem I was on 0.47.2.
I talked to my colleague now and we tested it on his chrome with the same version and for him it works normally!
So now I'm even more confused, but also calmer because it really seems to be a local problem for me.
I still want to figure this out.. I will try to analyse this more and to replicate my issue in a sandbox.

OK, thanks, let me know what you figure out.

I created a very simple sandbox:
https://p9cgxl.csb.app/

Interestingly it behaves different than in my application, but how I can not say, because the text is not rendered at all OR with very weird artefacts

This is how it looks in Safari, Edge & Firefox:
image

And this is Chrome:
image

This too:
image

Again, I'm on the currently newest Chrome (115.0.5790.98).
The problem seems to be isolated on my macbook and Chrome only ..
So I'm not sure if it's an issue at all, but it's so weird as the rest is running fine.
Maybe you have seen sth like this before? Or someone else has the problem, too?

Very, very weird. It looks correct in my Chrome of the same version too, on my MacBook Pro.

Long shot, but do you have any browser extensions that could be interfering? 🤷

I deactivated all extensions and tried to reinstall Chrome, but the problem is still there..
As long as it's just me it's fine, but I'm really curious what this could be and will try to figure it out.
When I have news, I'll post them here.
Feel free to close the issue!
Thanks for your quick answers!