pixelPerfectRender is not removing jittering in HTML5

[besserwisser]

• Haxe version: 3.4.2
• Flixel version: 4.2.1
• OpenFL version: 3.6.1
• Lime version: 2.9.1
• Affected targets: HTML5

---

Code snippet reproducing the issue:

package;

import flixel.util.FlxColor;
import flixel.FlxSprite;
import flixel.FlxState;

class PlayState extends FlxState
{

    public var testSprite: FlxSprite;

    override public function create():Void
    {
        super.create();
        this.bgColor = FlxColor.WHITE;
        this.camera.antialiasing = true;
        this.testSprite = new FlxSprite(null, null, "assets/images/pig.png");
        this.testSprite.x += this.testSprite.width / 2;
        this.testSprite.y += this.testSprite.height / 2;
        this.testSprite.pixelPerfectRender = false;
        add(this.testSprite);
    }

    override public function update(elapsed:Float):Void
    {
        super.update(elapsed);
        this.testSprite.angle += 0.1;
    }
}

---

Observed behavior:

Sprite is obviously jitting during rotation. This happens only on HTML5 target (tried Chrome, Chrome Canary, Safari, Safari for iOS, Chrome for Android, Flash). Compiling it to mac or ios does not produce this issue. Adjusting the properties pixelPerfectPosition and pixelPerfectRender do not have any effect on the jittering in HTML5. Also downgrading Flixel to 4.1, upgrading to Lime 5.0.3 or changing the code mentioned in this post had no effect. The FPS are constantly 60, it is not a performance issue. It looks more like that the image is being moved in the x/y position in a small way. Like a 1 pixel or so. But according to _player.x, _player.y, _player.width, _player.height, this is not happening.

Expected behavior: Smooth rotation like when I am targeting ios or mac.

[Gama11]

What about Flash?

[besserwisser]

I just tried Flash and there is jittering with Flash. But if I set this.testSprite.pixelPerfectRender = false; the rotation is smooth in Flash! But the HTML5 Output ist still jittering. Maybe this function has no effect on HTML5?

I made a video to demonstrate the issue. I enabled antialiasing to make it more clear: https://www.youtube.com/watch?v=E7iD3cTx1tQ

This is the link to the example from the video: https://github.com/besserwisser/jitterexampleflixel

I just build it with lime build html5

When building it as an "mac" application, it is very smooth!