Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

HTML canvas element "lightingcanvas" rendering glitch in Chrome

I just joined Roll20 and was wanted to start preparing for my groups first campaign. I started up the tutorial and noticed a very strange bug. My grid was overlaid with some very odd images: &nbsp; After I messed around in the inspector, I found the canvas element with id "lightingcanvas" seemed to be the culprit. After addin a display:none property to the element, the grid map appears to render fine: I am getting a few errors in the console, here they are in load order: app.roll20.net/:11 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googlesyndication.com https://*.doubleclick.net https://*.googlesyndication.com <a href="https://www.googletagservices.com" rel="nofollow">https://www.googletagservices.com</a> https://*.googlesyndication.com <a href="https://www.google-analytics.com" rel="nofollow">https://www.google-analytics.com</a> https://*.googlesyndication.com <a href="http://ajax.googleapis.com" rel="nofollow">http://ajax.googleapis.com</a> https://*.googlesyndication.com <a href="https://cdn.firebase.com" rel="nofollow">https://cdn.firebase.com</a> https://*.googlesyndication.com https://*.tokbox.com https://*.googlesyndication.com <a href="http://static.opentok.com" rel="nofollow">http://static.opentok.com</a> https://*.googlesyndication.com <a href="http://cdn.crowdin.com" rel="nofollow">http://cdn.crowdin.com</a> https://*.googlesyndication.com <a href="http://stun.l.google.com" rel="nofollow">http://stun.l.google.com</a>". Either the 'unsafe-inline' keyword, a hash ('sha256-yCyQlhrw2jGfftF0aKPoKw5dOWlIsCkgBwnHxXeTkZo='), or a nonce ('nonce-...') is required to enable inline execution. app.roll20.net/:12 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googlesyndication.com https://*.doubleclick.net https://*.googlesyndication.com <a href="https://www.googletagservices.com" rel="nofollow">https://www.googletagservices.com</a> https://*.googlesyndication.com <a href="https://www.google-analytics.com" rel="nofollow">https://www.google-analytics.com</a> https://*.googlesyndication.com <a href="http://ajax.googleapis.com" rel="nofollow">http://ajax.googleapis.com</a> https://*.googlesyndication.com <a href="https://cdn.firebase.com" rel="nofollow">https://cdn.firebase.com</a> https://*.googlesyndication.com https://*.tokbox.com https://*.googlesyndication.com <a href="http://static.opentok.com" rel="nofollow">http://static.opentok.com</a> https://*.googlesyndication.com <a href="http://cdn.crowdin.com" rel="nofollow">http://cdn.crowdin.com</a> https://*.googlesyndication.com <a href="http://stun.l.google.com" rel="nofollow">http://stun.l.google.com</a>". Either the 'unsafe-inline' keyword, a hash ('sha256-gCgVkAhT4jg1bWpbaHmyMrHQxNIEPZFk50qjzDbMloA='), or a nonce ('nonce-...') is required to enable inline execution jquery.1.8.2.min.js:2 GET <a href="https://app.roll20.net/editor/startping/false" rel="nofollow">https://app.roll20.net/editor/startping/false</a> 403 (Forbidden) jquery.1.8.2.min.js:2 GET <a href="https://app.roll20.net/editor/updatefromrt/tutori" rel="nofollow">https://app.roll20.net/editor/updatefromrt/tutori</a>... 403 (Forbidden) firebase.2.4.0.js:226 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied at firebase.2.4.0.js:226 at gc (firebase.2.4.0.js:52) at Oi (firebase.2.4.0.js:226) at firebase.2.4.0.js:221 at firebase.2.4.0.js:186 at Qh.h.Ld (firebase.2.4.0.js:188) at Eh.Ld (firebase.2.4.0.js:178) at vh.Kg (firebase.2.4.0.js:176) at yh (firebase.2.4.0.js:170) at WebSocket.La.onmessage (firebase.2.4.0.js:169) firebase.2.4.0.js:226 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied at firebase.2.4.0.js:226 at gc (firebase.2.4.0.js:52) at Oi (firebase.2.4.0.js:226) at firebase.2.4.0.js:223 at firebase.2.4.0.js:185 firebase.2.4.0.js:45 FIREBASE WARNING: set at /tutorial-campaign/players/-KfNlQFWSiQsSjleIcOt/lastActive failed: permission_denied&nbsp; I just updated Chrome to the latest version, I have disabled every plugin I was running on Chrome, and I cleared my cache and restarted Chrome multiple times. I just updated Firefox as well, and it loaded the tutorial without any issues, so luckily for the meantime I can use Firefox to go through the tutorial.
1489696462
Tetsuo
Forum Champion
Thanks for the completeness of your report. I'll bring this to the Devs attention, and hopefully we can get you rolling in no time.
1489696757

Edited 1489696864
Thanks. I just noticed upon closer inspection of the first image that the glitched images appear to be distorted version of various Application (Mac OS X El Capitan) windows, some that were not even running at the time. For example, I had a PDF of the D&D 5E Dungeon Master's Guide open previously, and I can see pieces of the cover. I also see pieces of various Finder windows that had been open at one point, but where not open when I started the tutorial. Somehow that canvas element is capturing and distorting "screen shots" of various Applications from my system, even if those Applications are not currently running.
1489706023

Edited 1489706179
Tetsuo
Forum Champion
A lot of users report various graphical bugs on Macs, particularly older ones.&nbsp; One user seems to have found a work around&nbsp;with Chrome 54.0.2840.71 (64-bit) and Hardware Acceleration ON.&nbsp; To note:&nbsp;Roll20's officially-supported browsers are the latest versions of Chrome and Firefox. <a href="https://app.roll20.net/forum/post/4707950/chrome-hardware-acceleration-mac-rendering-issues/?pageforid=4707950#post-4707950" rel="nofollow">https://app.roll20.net/forum/post/4707950/chrome-hardware-acceleration-mac-rendering-issues/?pageforid=4707950#post-4707950</a>
1489952172

Edited 1489952477
I am running Chrome Version 57.0.2987.110 (64-bit), which is the latest version released, on a 2013 iMac running El Capitan 10.11.6. I would rather not roll back to an older version just for one website, especially because that is not supported by Chrome and would require erasing all of my user data. Not to mention the security concerns with rolling back 3 versions. Chrome 57 alone&nbsp;fixed nine high-severity vulnerabilities. And version 54 has a fairly severe vulnerability:&nbsp; <a href="https://www.cvedetails.com/cve/CVE-2016-5198/" rel="nofollow">https://www.cvedetails.com/cve/CVE-2016-5198/</a> The issue does not occur on my 2014 Macbook Pro running macOS Sierra 10.12 and Chrome Version 57.0.2987.110 (64-bit), so it may be an issue with older Macs, or possibly an issue with El Capitan. For now I think running in Firefox will be fine, and is a much safer alternative to rolling back my browser. Thanks for your support, if there is any more information I can provide to help debug this issue let me know.
1490226991
Gid
Roll20 Team
Hi Devin, Thank you for doing the digging into this. It looks like the issue comes down to an issue with Chrome's handling of WebGL on El Capitan. My recommendation is to utilize the workaround you've found (using Firefox) until Chrome has mended its crossplatform support for older versions of iOS.