evanw / glfx.js

An image effects library for JavaScript using WebGL
https://evanw.github.io/glfx.js/
MIT License
3.26k stars 402 forks source link

Top/Right border appears on canvas in Firefox #14

Open gooozas opened 11 years ago

gooozas commented 11 years ago

Hello, thanks for Great lib! I just found one issue when using it with FF browser (18.0.2): after calling canvas.draw(texture) 1px border appears on the top and right of canvas.. You can reproduce it easily even on: http://evanw.github.com/glfx.js/demo/ with FF, just remove all styles (i did it with firebug) from canvas parent (#container) and you'll see that border i've mentioned above. Thanks!

evanw commented 11 years ago

Thanks for reporting this issue. This is very interesting. It sounds like this could be a problem with texture coordinates and rounding since the origin of OpenGL's coordinate system is in the lower left corner, although that's never a problem I have experienced. Unfortunately I am not able to reproduce it using FF 18.0.2 on either Mac OS X 10.8.2 or Windows 7. After removing the border and box-shadow styles, the canvas looks just like the original image for me.

What operating system are you using and what does the contents of the "about:support" URL look like, specifically the graphics section?

gooozas commented 11 years ago

Hi, Evan,

There are some screenshots below. How does it looks on my machine when removing styles from #container: https://www.dropbox.com/s/aecv676h2bwacfm/img1.png - as you can see there is 1px "silver" solid border on the top and the right. https://www.dropbox.com/s/pv0iwboqvqv22bh/img2.png - zoomed by ctrl and "+". And finally my graphics section: https://www.dropbox.com/s/ar1gf0t3s1cj2xm/img3.png

My OS is WIN7 Proffesional (64bit)

godknowsiamgood commented 10 years ago

So is there any workaround for this issue? Demo page (Windows7 + latest Chrome): image