TL;DR Canvas Elements not showing up for some sites and does show for others. How can I have it show consistently?
I have a 2021 Macbook Pro with an Apple M1 Pro processor. I use Chrome Browser v105.0. On some sites that use the HTML5 canvas element, I am able to see stuff being drawn on the canvas but for other sites, the canvas element is clearly there but nothing is drawn on it. I tried playing with the chrome://flags that have to do with GPU and Canvas by switching them on and off to see if I can get Canvas Elements showing up consistently and now they do show for the sites that it was not working for but only after refreshing the page.
Has any one experienced this before and if so, is there a way that I can have canvas elements show consistently without all the workaround?
I am experiencing the same issue with HTML5 canvas on Chrome M1, seems to be related to Apple Silicon (M1) + Chrome 105 because it's working fine on Chrome v105, on a Windows/MacOs Intel computer. It is fixable (on your client only) by disabling the 'Out-of-process 2D canvas rasterization' flag on chrome://flags. Still waiting Google to fix this issue as it is a breaking issue.
Edit : tested on Chrome Beta (v106.0.5249.30) and the issue is still present
We experience the same problem (only with the Apple M1 processor, Apple M2 not tested). We developed an app using the canvas element. It worked fine with Apple M1 and Chrome (till v104). When Chrome v105 was launched the problem started and the canvas element didn't draw anything anymore. The problem only occurs when the flag accelerated 2d canvas is enabled. When this flag is disabled the canvas works fine again. This is a breaking issue and should be fixed by Google. Everything works fine in the latest version of Safari and Firefox with acceleration enabled.
The problem is fixed with Google Chrome v107. Topic can close.
Related
I cannot make Google Chrome tile correctly in Awesome WM (version 4.3 in Debian 10 & 11). Chrome's window stops responding, or goes blank, if it is resized (a new tile is added next to it, or a tile is closed/minimized), or when it's open in floating mode.
This weird behavior started with the recent version of Chrome (probably, 86). Only Chrome is affected, Firefox and all other applications I use work without problems.
I tried running Chrome with debug log, but there is nothing helpful there. No error messages appear, neither in journalctl nor in ~/.xsession-errors.
Did anyone experience anything like this before?
The problem was resolved after disabling "hardware acceleration" in Chrome. Seems like this feature didn't work well on my system (intel hd graphics 4400 and Awesome WM).
Not sure if this is a new problem with Chrome, but video that has been working for ages is suddenly showing as black and I get the below error when rendering.
The video size is 1920x1080
[.Offscreen-For-WebGL-08FD8CF0]GL ERROR :GL_INVALID_VALUE :
glCopySubTextureCHROMIUM: source texture bad dimensions.
I'm using video as a ShaderMaterial on a sphere for VR video.
Is this something to do with a recent update or something I'm doing!?
Thanks to #gman for tracking down the bug.
It looks like this is a (known) regression in Chromium, which is the engine that drives Google Chrome. It affects Version 57.0.x.x (Version 57.0.2987.133 in my case, both Windows 7 and Ubuntu - others report the issue on Macs). It seems that the issue occurs when trying to play a video with "elongated pixels", and goes away when playing a video with "square pixels". Not a video processing expert here, but that's what I've derived from the thread. A work-around would be re-encoding/re-transcoding your videos, if you can.
Based on the Chrome stable release schedule, version 58 will be out 4/25/2017 (source), and based on the bug thread, it should hopefully be fixed by then.
Edit: This should be fixed in Chrome 58 and Chrome 59 (source).
EDIT/Solved: This seems to have mysteriously solved itself. I am still running the same Chrome build, same machine, and I have not rebuilt the SWF. The only difference I can thing of has been closing the browser and hibernating over night ...
I am having problems in Chrome with the rendering of a Label in ButtonBarButton, and I am trying to find a way to work around it (unsuccessfully). As you can see, transparency is generally working - the background of the unselected tab has alpha=0, so it is just the area around the font causing problems.
Does anyone know of a workaround? Verified as problem in Chrome on both Windows and OS X. All other browsers displays the tab fine, which is not surprising given that Chrome ships with its own Flash plugin ...
A correct rendering of the transparent tab in Firefox
Chrome's rendering of the same thing
Using OS X 10.6.8, Flex SDK 4.6, FlashBuilder 4.7, Firefox 18.02, Chrome 24.0.1312.57.
All as updated as can be as of February 2013.
This might be another problem with Chrome's buggy Pepper Flash player. It has many issues. You can confirm if Pepper Flash is the problem by disabling it. When you do that, Chrome will use the more standard Flash plugin, which should also be installed.
To disable it go to: chrome://plugins
Click the plus icon (details icon) and find the Flash plugins. Disable the one that has "PepperFlash" in the path.
Pepper Flash is a great idea, but its not quite as stable as the regular flash plugin.
After upgrading to Chrome 18 on OSX 10.7.3, we started noticing fleeting rendering artifacts seemingly related to form elements:
They come and go during scrolling, it seems. I've been testing in a variety of other OS/Browser environments and have been unable to reproduce this, nor had it happened in previous versions of Chrome.
This is a mature, stable web app with fairly complicated HTML/CSS. I haven't been able to produce a simple test fiddle that reproduces this.
Anyone else seeing issues? Can you think of a possible HTML/CSS cause and not a Chrome bug?
I also noticed that Chrome 18 displays artifacts in some pages, but this only happens when that page is GPU accelerated. I asked a similar question a few days ago:
GPU acceleration crashes website
Chrome enables the hardware acceleration when it detects 3D transforms in your CSS.
You can go to chrome://flags and enable the "Composited render layer borders" option, if you see green squares all around your page thats because some CSS rule is causing your page to be hardware accelerated. You can try removing any 3D CSS rules or assign a higher z-index to these elements. It usually helps.
I have an <audio> element in a webpage. I'm happy to use the native browser controls, which are fine in Firefox, Safari, and Chrome for the Mac.
However, Chrome (12.0.742.122 on Windows 7) is displaying the native audio player without any background:
For comparison's sake, here's how it looks on Chrome (14.0.835.0) on OSX:
I realise my Mac's a couple of versions forward (it's on the dev channel) but this seems like a surprising issue. Any idea how to fix it?
Alternatively, can anyone recommend a completely painless player (with flash fallback) that I can drop it to style them all the same?
If you wrapped it in a div with a medium-gray background, wouldn't it work around the problem in Chrome 12 and still look the same in Chrome 14?
This is a known bug: http://code.google.com/p/chromium/issues/detail?id=82170