Artifacts on the phone and some old monitors

[Artem_Mikheev13]

Hello, this is the first time I am writing a question. I use a translator for this. Created a simple container with several internal graphics objects. Everything is fine on most monitors, but it's bad on older monitors and mobile devices. Artifacts appear. How to fix it?

Code for creating graphics:

if (element.inner_un > 0) {
            const heightUnit = heightContainer / element.inner_un
            element.customProps = {
                ...element.customProps,
                heightUnit: heightUnit
            }
            let lineCoordY = element.customProps.coordY
            for (let i = 0; i < element.inner_un; i++) {
                //creating graphics for the line
                const lineGraphics = new PIXI.Graphics();
                //Outline of the container
                lineGraphics.lineStyle(1, "#000000");
                //Drawing this container
                lineGraphics.drawRect(element.customProps.coordX, lineCoordY, widthContainer, 0);
                elementWardrobe.addChild(lineGraphics)
                lineCoordY += heightUnit
            }
            //drawing lines in units
            if (element.div_h > 1) {
                const div_hElement = heightUnit / element.div_h
                let lineCoordY = element.customProps.coordY
                for (let i = 0; i <= element.inner_un * element.div_h; i++) {
                    //creating graphics for the line
                    const lineGraphics = new PIXI.Graphics();
                    //Outline of the container
                    lineGraphics.lineStyle(1, "#000000");
                    //Drawing this container
                    lineGraphics.drawRect(element.customProps.coordX, lineCoordY, widthContainer, 0);
                    elementWardrobe.addChild(lineGraphics)
                    lineCoordY += div_hElement
                }
            }
        }

 

[jasonsturges]

Might want to check your app's `antialias`, `autoDensity`, or `resolution` as a starter.

Presumably it's struggling to antialias on low-tier single density displays.

Otherwise, might be an issue with scale modes which is probably unlikely.

You might also have some success increasing the thickness of the line from 1 to 2 - something thicker that does not require so much half pixel aliasing.

Edited July 2, 2023 by jasonsturges