In Wikipedia, when looking in pages using Mathjax rendered formulas, Google Chrome hardware acceleration seem to mess up the displaying of some small symbols like the minus sign, example:
Wikipedia Gaussian Integral page with hardware acceleration ON
This is instead if hardware acceleration is turned off:
Wikipedia Gaussian Integral page with hardware acceleration OFF
Any solution other than turning hw acceleration off? Thanks in advance.
Thanks to #PeterKrautzberger
It's a bug in Chrome that's been fixed recently (Chrome 88), cf. the
discussion at github.com/mathjax/MathJax/issues/2612
Related
I have webgl software only on chrome yet hardware accelerated on chromium on the same machine.
How can i figure out the problem? because if this happens for a lot of people then there is less incentive to use webgl in the first place.
Google Chrome:
Chromium:
It's also possible that nothing in about:flags will fix this
I have tried various tips like resetting all flags, or enabling the "Override software rendering list" option and they didn't work for me
It turns out there is another place to look, under chrome://settings/ there is "Use hardware acceleration when available"
I remember now I had turned this off a few months ago as it was glitchy when using an external monitor via a Thunderbolt dock
Flipping it back on and using the laptop display only I now have nice smooth accelerated WebGL
As suggested by the comments, resetting all flags in about:flags fixed the issue.
https://github.com/pshtif/Genome2D/downloads ist the only Stage3D 2D engine with FlashPlayer 10 compatible (no wmode setting) fallback to software Rendering i am aware of.
Unfortunatly they dropped this great feature after 0.35 Version. But i need a Stage3D 2D engine that has such fallback. Any other Engine out there with support for that and active development?
EDIT: Background: I need hardware rendering only on mobile were i can assure a correct set rendering mode. But in the web a lot of game portals do not support any wmode setting. But my game will run fine on a desktop in softwaremode.
This fork of Away3D Lite does exactly what you want (complete description here). It is a 3D engine though. You can overcome that "problem" and make it a 2D engine using a fixed camera and an orthogonal projection.
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.
Just updated Chrome to 18.0.1025.142 from 17 on a Mac running 10.7.1 and it's killed the performance of our site. We've been using translate3d where available to move a large number of items around the screen. I'm animating with requestAnimationFrame. In 17 we were getting framerates upwards of 50fps. Now lucky to get 15fps. It's really bad.
Has hardware acceleration been turned off by default? Anyone else noticed any problems like this? I've noticed the font rendering has been improved and is now on a par with Safari (which runs the site beautifully) maybe this change has had an effect on general rendering performance?
I'm afraid I can't share the link due to an NDA. But any help would be greatly appreciated!
Update:
As far as I can tell it IS still GPU accelerated but the performance is really bad, other people have reported similar things. The Chromium builds of v19 seem to be back to the old quality of performance.
There used to be a flag when launching chrome --show-composited-layer-borders which would put red borders around gpu accelerated elements. This option now seems to have been added to chrome://flags/ but it paints green borders around layers and doesn't seem to distinguish gpu elements any more. Does anyone know of an option to show if elements are being rendered by the gpu?
chrome://gpu/ says that everything is being hardware accelerated...
Reproduce the problem with fresh code in a new web page. This will greatly help both your SO question and bug report.
Browsers regularly tweak whether hardware acceleration is used based on whether your graphics card and driver version is supported. Updating your graphics card driver may fix the problem for you, but maybe not everyone else. (This tool I wrote might help: graphics driver updater)
In fact it's a bad idea for your website to depend on hardware acceleration, because a significant fraction of users have crappy unsupported hardware and/or out of date drivers which are blacklisted to stop the user's computer crashing while they browse the web. They'll get crappy, un-accelerated framerates too, in any version of Chrome.
So IMO the real problem is your website depends on hardware acceleration which not everyone has, and you just noticed because Google blacklisted your setup in Chrome 18.
I'm working on a page turn animation. The performance is disappointing. Particularly if you take the pages class and make it something like 800px wide (paste $('.pages').css({width: '960px', height: '600px'}); into your console). I used to have around 16 transitions running at once and reduced it to 9, many of which are transforms! I don't know what else I can do.
Chrome does not seem to be using the GPU. It spikes the FPS on initial page turn but then dips down at regular intervals (enabled this with about:flags):
Try it out in Safari and you will get better performance but see that the animations do not sync up, often lag behind each other, and there's a weird wobblyness that Román Cortés's project also suffered from in the same browser (I haven't made it work in Fx yet).
There hasn't been much good material about how to optimize CSS transitions and animations on the web and I've been mostly teaching myself. I was hoping someone would have this kind of advice.
In order to take advantage of the GPU you have to use translate3d(x,y,z) instead of translate(x,y) in your -webkit-tranform's. This will force Chrome to use the GPU to render the animations.
Beware that while the performance will greatly increase if the computer has a good video card, it will also degrade on a slower hardware.
Here's a page flip I did for our launch of Sencha Animator. It's also inspired by Ramon Cortes' original, but uses different mechanisms - as far I as remember. It's super smooth in Safari and on iOS, but kind of jerky on Chrome desktop. Haven't checked it in Android 4 yet though.
I'm using Chrome 17 on OSX, and it seems fine - runs at around 20-30fps, no dipping or graphical issues. I suspect that this is just an issue with older Chrome builds.
Animating box-shadows and -webkit-gradients is very expensive, try removing them temporarily to see if it improves performance. If it does, see what you can do to replace them with images.