Screen tearing/glitches in Firefox?

Hello,

I'm developing a pixelart-style project, and I keep getting some weird screen tearing in Firefox on Windows 7.

All of my drivers are up to date, as is the browser. Also, this is a problem I've experienced with Construcct 2 projects on my old PC as well, so it doesn't appear like this error is limited to my current computer.

Example file: http://dl.dropbox.com/u/2725629/html5tests/Astrojone/index.html

My computer is a currentgen MacBook Pro with 8 GB RAM.

Is there any way to fix this?

Thanks in advance.

Some other users have reported issues with Firefox not V-syncing as well as other browsers. It still gets a great framerate, it's just the V-syncing seems to have some issues. Hopefully Mozilla will have it fixed soon.

Is this tearing obvious or subtle? I checked out your page in both Chrome and FireFox on my generic Windows 7 laptop. Looked the same. No obvious tearing in either. The page was static, though. A logo appeared in the middle, and then nothing else happened. Is there supposed to be more happening? Is the tearing associated with animation?

It's only supposed to show a fade-in, but the spritefont object will have tearing.

I've also had problems with tearing in previous C2 games I've made, so I do think it's an issue.

Is there anything that can be done about it? Does anyone know if there are any settings in C2 with which you can avoid triggering this effect?

I think it's an important issue since a lot of people are Firefox users.

EDIT:

Also, I've tried the HTML5 game Browser Quest on all browsers on both Windows and OSX, and it doesn't have any problems with tearing whatsoever. If the problem is with Firefox, how come I'm only getting this with Construct 2 games?

Have you tried tweaking the "Sampling" property of the project ?

Yes. It makes no difference whether it uses point or linear sampling.

OK so I started building a game composed of 16x16 tiles, among which there are a few animated water tiles.

However, my game has started tearing on other platforms as well.

Example: dl.dropbox.com/u/2725629/html5tests/Astrojone5/index.html

Screenshots:

http://dl.dropbox.com/u/2725629/tearing_ipad2.png

http://dl.dropbox.com/u/2725629/tearing_iphone_4s.png

http://dl.dropbox.com/u/2725629/tearing_win_7.png

The screenshots were taken with linear rendering, but the currently uploaded demo uses point rendering.

This is a pretty huge issue to me. Any ideas?

Oh, I thought you meant V-sync tearing, that's a sampling issue. Have you tried setting 'Pixel rounding' on in project properties?

I looked in to this some more. I could reproduce a blurring/seaming issue with Google Chrome with WebGL enabled only. Firefox did not appear to be affected. I've reported a bug to Google about it. Star this issue to get updates about it:

https://code.google.com/p/chromium/issues/detail?id=130007

I can't reproduce any other issue in any other browser - setting pixel rounding on might help, though.

Hi, sorry to the OP if this comes as a thread hijack, but looking at the example that you post on google, Ashley, I came across a problem that was happening to me sometimes in Chrome. After many page reloads (F5) on Chrome the canvas image starts to get blurry ad infinitum. I was not able to reproduce it in a "reproducible manner" before, so I did not bring it up, but doing what you say on the post happens to make it start, and hitting F5 get the problem all the way through.

Don't know if it is entirely related to the issue you are describing, but when the blurriness is at max I got this at Chrome console:

GL_INVALID_OPERATION : glGetRenderbufferStorageMultisample: no renderbuffer bound /labs/chromewebglbug/:1

GL_INVALID_OPERATION : glFramebufferRenderbuffer: no framebuffer bound /labs/chromewebglbug/:1

GL_INVALID_OPERATION : glFramebufferTexture2D: no framebuffer bound. /labs/chromewebglbug/:1

Don't know if it helps with the issue in google forums in some way. Will star the issue to get it promoted, anyway! Sorry to the OP again!

Oh, I thought you meant V-sync tearing, that's a sampling issue. Have you tried setting 'Pixel rounding' on in project properties?

Well, here are a couple of tests:

http://dl.dropbox.com/u/2725629/html5tests/Astrojone_rounding_off_sampling_linear/index.html

http://dl.dropbox.com/u/2725629/html5tests/Astrojone_rounding_on_sampling_linear/index.html

http://dl.dropbox.com/u/2725629/html5tests/Astrojone_rounding_off_sampling_point/index.html

http://dl.dropbox.com/u/2725629/html5tests/Astrojone_rounding_on_sampling_point/index.html

They all look about the same to me in almost all browsers. The only case in which the tiles don't seam is in Firefox on OSX (which I guess has webgl turned on?) with point rendering enabled, but even so the animated water tiles are still completely desynced. The pixel rounding seems to make no difference in either case.

dEspadas, bolosaur - are you testing with r92? Some related fixes were included.

Yeah, sorry. Those links were built with r92 after your fixes had been applied.

Well, are you sure your tile artwork itself actually lines up? Looks like you have some slightly different animation speeds or something so they will break synchronisation.

Ashley, no, I was not, will do that soon!