Patch Nine Adds Pixels between slices on firefox?

I have a project where we are making a patchNine Icon as seen here:
image

But as you noticed there is small likes between all the patches, this only appears on firefox. I have tried flooring all fractional pixel values to see if that fixed it but it did not.

Any ideas how to trouble shoot this?

Here is how they look in every other browser:
image

Oh interesting. can you provide a repro in the PG so we can check?

I shall try! Figured that was going to be the response <3

https://playground.babylonjs.com/#M6TGDF#3

Ok here we go. It has to do with scaling.

I was looking at the github code but Im not sure what it could be…

image

Looks like it even does it in the NinePatch demo if you go into the inspector and change the scale of the parent element on the GUI
https://www.babylonjs-playground.com/#G5H9IN#9

This is only in Firefox btw.

Yeah this seems really like a firefox bug to me…
Or maybe a missing option ?

I wonder if this is related to image smoothing which is only NOT supported by Firefox:
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs | MDN (mozilla.org)

Do you mind trying (in edge or chrome) to test with and w/o it?

Ohh you know what, I forgot about this option it might be the image interpolation too! You just gave me like three ideas. I’ll figure this out now.

Hehe my pleasure :smiley:

I tried a number of things on my side with the 9-patch code (trying to offset some positions/width/height by 0.5 and such) but could not come up with a scheme that always worked in Firefox… It really seems to have something with the code that handles scales in Firefox (problems arise when scaling is not an integer value like 2.65 for eg).

I got it figured out. Ill be doing a PR

Just waiting for this build to go through then Ill post it.

2 Likes

so I found that _populateNinePatchSlicesFromImage does nothing and had to go back to gut that from the script. Waiting for the build to finish now.