I'm a bit confused because my project worked yesterday but seems to no longer work correctly today. (Yes, I've checked previous versions from git.)
The problem: Some divs previously hidden with -webkit-backface-visibility: hidden; magically appeared.
I have isolated this issue into a fiddle:
http://jsfiddle.net/Js6cg/1/
The div is visible in Chrome at 23.0.1271.64 m (wrong) but hidden in 25.0.1326.0 canary (as I expected).
Can you confirm that this is indeed a bug in Chrome or am I using the CSS incorrectly somehow?
(I've updated my GPU drivers (AMD Catalyst) from 12.8 to 12.10 today, if that's important.)
Additionally, the site that demonstrates the effect I've been reproducing appears to work +- correctly at Chrome stable (except for aparrently ignoring -webkit-perspective and animating kind of choppy), while Chrome canary renders it very well and accepts the perspective. I'm confused.
OK, that is embarassing.
The story looks like: I've updated the GPU drivers but looks like I haven't actually restarted Chrome for ages. For some reason, it was unable to re-enable GPU compositing after the driver update and hence some more advanced CSS3 effects (like perspective and backface-visibility) didn't work at all, while simple transforms used a fallback CPU implementation, which also made them look choppy and on the demo site.
I've started Chrome Canary well after the driver update, so it didn't have any issues with GPU compositing. One instance worked, another didn't, but version mismatch wasn't important here at all.
Restarting Chrome fixed that issue. And I'm taking a break!
Related
Some change in recent Chrome versions (likely in June 2017) cause options in a <select> input to render much bigger than in other browsers (or in older versions of Chrome).
For example, dropdown on this w3schools page on some machines renders like this (Chrome 60.0.3112.90, 64 bit, Windows 10):
instead of expected (Firefox 55.0, 64-bit, Windows 10):
Is there any workaround that can be implemented in code to prevent it from happening (CSS solution preferred)?
So far I've found:
Discussion on Chrome product forums, which confirms that this is observed by many people, but there's no answer whether it was intentional or not. Also, observations were made that presence of touchscreen drivers in a system might cause this behaviour.
Chromium bug #739196 describing this issue, but also with no clear answer whether it's intentional or a Chromium bug
few answers suggesting that padding for <option>'s in a <select> can't be controlled via CSS by design, so this padding was never easy or possible to change.
Should be able to just add some CSS styling for the <option> tag to get it to look the way you want on most browsers.
http://jsfiddle.net/Ahreu/50/
The additional padding was added in Chrome 59 for any device that Chrome thinks has a touch interface. There currently is no way to disable this "feature".
Chrome shows two rows in Dropdown-menu
Google Chrome Help Forum
Observed same issue on Windows 10 + Chrome, with no actual touchscreen interface.
Uninstalling/installing "Synaptics Pointing Device" (touch pad on laptop) fixed the issue for me. As the other forums mentioned, it appears to be related to Chrome thinking it is on a touch enabled device. Worth a try to disable/re-install devices that may appear as such.
I discovered I had a problem when I checked one of my uploaded three.js projects. At first I thought maybe I had done something wrong. My project used r63, so I updated to r65, but that didn't solve the problem, even after clearing the cache and refreshing. I then checked a couple of the demos from the three.js site, and I found they are slow for me, too. As an example, http://carvisualizer.plus360degrees.com/threejs/ autorotates incredibly slowly in Chrome, but at normal speed in Firefox and IE 11. I also tried http://helloracer.com/webgl/ which is fine in Firefox but really choppy in Chrome. It's a disaster in IE11, by the way, but it's an older demo. My project uses OrbitControls, with autorotate enabled. The model is a 16MB JSON file (200,000 triangles), but it worked fine before and works fine in Firefox and IE11. I'm on a Windows 7 machine with a GTX Titan (work computer). Thanks!
type chrome://flags in chrome address bar, and look for settings #ignore-gpu-blacklist
this happened to me, suddenly my gpu was added to blacklist and chrome reverted to software rendering..
For me running google-chrome on linux I needed to enable Use hardware acceleration when available in chrome://settings
I'm working on a project using KineticJS version 4.6 (currently the latest version), and since last night's Chrome update to Chrome 29, the Kinetic canvas is completely blank. While using the console, I am still able to detemine that the created objects, such as the Kinetic.Stage and Kinetic.Layer, still exist and are filled with correct data.
Afterwards, I tried loading the same page in Internet Explorer and Firefox, and they still work as intended, showing the canvas with the correct elements.
I have tried searching for people with similar issues, but I guess Chrome's update is too recent to show any results. Does anyone perhaps know if there is a way to fix it or if I should simply wait for either a KineticJS or a Chrome update?
EDIT: And now it suddenly works again after restarting Chrome. Hotfixed?
EDIT2: After a while it broke again, but restarting the browser seems to work
EDIT3: It is a bug in Chrome, acknowledged by the Chromium team in this thread. The thread states that the bug is definitely fixed in version 30, which is currently in beta. This fix may be merged in version 29 soon, but there is no definitive timetable for this.
We have the same problem in Chrome 29.
In some cases a workaround is to tell your users to use Chrome Incognito mode to fix this issue.
A test to replicate the issue consistently is posted here:
https://github.com/ericdrowell/KineticJS/issues/585
At present, the bug is not present in Chrome 30. (8/27/2013)
You should star this chromium issue:
https://code.google.com/p/chromium/issues/detail?id=280153
I'm trying to understand these strange rendering error boxes that are too big to be ignored. This seems to happen on Chrome in Windows 7 (my testing isn't too elaborate) and nowhere else. When I attempt to inspect, they all disappear. This could be some kind of video card issue as I'm using some pretty advanced CSS3 transitions that could mess up memory. In any case, if someone could offer advice on what I could do to fix, I'm at a loss. The site is www.crane-usa.com
Having the same issue with our site using 21.0.1180.89 and 21.0.1180.79. Problem is in Windows 7, Mac OS X latest, Ubuntu and in Chrome frame running in IE9. IE9 with Chrome frame disabled works fine. The problems are intermittent and unrepeatable. Inspect element removes the problem as you say. I tried disabling GPU compositing via chrome://flags but that didn't fix the issue.
We and our users have only been seeing these issues since approx Aug 27, 2012, 3 days ago. I took a look in crbugs.com and found that this seems to have existed for a couple of weeks already. http://code.google.com/p/chromium/issues/detail?id=143647
Sorry our site is not public so I can't post our url but you're not alone.
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.