Patch Nine Adds Pixels between slices on firefox?

Pryme8 · January 13, 2021, 6:23pm

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

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:

Deltakosh · January 13, 2021, 7:05pm

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

Pryme8 · January 13, 2021, 7:06pm

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

Pryme8 · January 13, 2021, 8:11pm

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…

github.com

BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/image.ts#L834



private _renderNinePatch(context: CanvasRenderingContext2D): void {
    let height = this._imageHeight;
    let leftWidth = this._sliceLeft;
    let topHeight = this._sliceTop;
    let bottomHeight = this._imageHeight - this._sliceBottom;
    let rightWidth = this._imageWidth - this._sliceRight;
    let left = 0;
    let top = 0;

    if (this._populateNinePatchSlicesFromImage) {
        left = 1;
        top = 1;
        height -= 2;
        leftWidth -= 1;
        topHeight -= 1;
        bottomHeight -= 1;
        rightWidth -= 1;
    }

    const centerWidth = this._sliceRight - this._sliceLeft;

Pryme8 · January 14, 2021, 2:10am

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.

Deltakosh · January 14, 2021, 4:29pm

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?

Pryme8 · January 14, 2021, 4:41pm

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.

Deltakosh · January 14, 2021, 5:51pm

Hehe my pleasure

Evgeni_Popov · January 14, 2021, 6:39pm

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).

Pryme8 · January 14, 2021, 8:54pm

I got it figured out. Ill be doing a PR

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

Pryme8 · January 14, 2021, 9:33pm

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.

Pryme8 · January 15, 2021, 5:51pm