Google Chrome Shifting Canvas Bug

[HotNoob]

Hi, 

Not sure why, but i am unable to even find anyone mentioning this bug... yet i've been running into it ever since i first tried HTML5... and that was around 2011... 

So, i've now just decided to take on a more serious approach to HTML5 for game dev; as it is quick, easy, and for multiple mobile devices.

You can see the bug in the video, starting at ~2:40, as the edges of the game start to shift. 

https://www.youtube.com/watch?v=hmKgb3vearI&list=UU2tq0y4VE81QV2RSy-qreog

This only happens in chrome, ie and firefox don't show this bug.

I'm guessing that it is related to the objects going off screen ( which are removed as soon as they are completely off the screen )
The shifting happens completely randomly, in random direction. 

it is very disappointing to see that this bug still exists after 3 years.

Anyone have any work arounds?

[d13]

it is very disappointing to see that this bug still exists after 3 years.

I've also never heard of or experienced this bug.

What about anyone else out there reading this?

Are you sure it's a bug in canvas, and not the game engine you're using or your game code?

[HotNoob]

I've also never hear of or experienced this bug.

What about anyone else out there reading this?

Are you sure it's a bug in canvas, and not the game engine you're using or your game code?

bug doesn't happen in firefox, safari, ie, android's webview, it just happens in google chrome. 

12 years of programming experience; i know the difference between a bug that i wrote, and whatever medium i'm using. 

 

[JUL]

I don't see what particular bug is happening at 2:40 (sorry,I'm probably getting old and short sighted as time goes by).

Where to look at specifically ?

 

Seems everything is fine to me, I must have missed something, somewhere.

[Sebi]

Must be a bug in your rendering process.

No one else is having that issue with their games and the bug doesn't happen before 2:40, most likely some bug in your games code.

 

Just try unsetting the transformation before rendering. 

[HotNoob]

a bug in the code would not ONLY show on google chrome.

the bug doesnt even show on chromium... 

[Sebi]

a bug in the code would not ONLY show on google chrome.

the bug doesnt even show on chromium...

Other developers do not have that issue. It might be a floating point issue or something else.

And what reason could there be that it starts shifting after 2:40 and not before? Because something in your code must happen around that time.

[pixelpathos]

That's a strange issue - would be interesting to know what that is. Certainly looks like it could be an accumulation of floating point errors in the translation, or something similar.

 

I've seen examples of different browsers behave differently with regards to non-integer co-ordinates. For example, in canvas 2D, if I pass a non-integer X or Y position to drawImage(), I would expect the browser to perform a draw on sub-pixels. Most do, but Safari on iOS seems only to draw on whole pixels. Safari on iOS will do sub-pixel rendering if given a non-integer transform, and Safari on MacOS will do sub-pixel rendering using drawImage() only! It's more of a grey area than a bug, and some might argue an "optimisation"...

 

One possibility is that your code might need to account for differences in behaviour between browsers, and that it's not actually a bug in either your code of Chrome's. Regardless, it would be interesting if you manage to tie this down.