Black outline around InputText with 0 tickness

Hello, I’m getting a tiny black outline around my InputText with the thickness set to 0.

I’m thinking this is the browser rounding pixel values and adding black pixels when it’s needed? As you can see in the picture the left side is actually behaving fine. Does anyone know a workaround for this? Maybe you can set the filler pixels to white?

image

I would use Pryme8’s approach, creating your own element:

Tried that, same issue

Hello! Are you able to get a Playground example of this? This could help us figure out what’s going on :thinking:

Ah apparently Pryme8 used 2D GUI and I’m using 3D/Meshes. Maybe that’s the issue here? Because I can’t reproduce the border in Pryme8s Playground.

You should take into account it is TypeScript not JavaScript, aswell.

Yes, I converted it to JavaScript, what about it? I used the custom element, but as a ADT for a mesh. I think the issue might be that it’s not 2D. But I can’t really change my approach of using meshes for the text.

ADT for mesh is from the 2D GUI. May be you could try constraining the textInput in a container with a -1px padding. I am not sure it will work since this tiny-mini line sure looks like a browser adding for this element. Still worth giving it a try I suppose…

Edit: Forgot to ask. Is this mobile only or are you having the same on desktop? It could also be related to a small bug in this control when for mesh. Because in ADT/FS, I don’t have this.

This is on desktop.

Ok, so if this is desktop setting the color of the container to transparent or #00000000 should help and give this result:

Not sure about mobile though. It works on chrome on desktop. Didn’t make any further checks.
Hope this helps,