Black boxes all over Chrome for Windows - google-chrome

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.

Related

Full-window WebGL canvases in Chrome are incredibly slow

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

KineticJS 4.6 no longer working in Chrome 29

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

Video.js breaks IE9 and IE10 under certain, unknown, parameters

I've been banging my head against my desk for months now trying to find a solution to this problem. The biggest issue is that it only pops up in certain circumstances. Since modern.ie launched and IE10 was released I've renewed my search for answers.
I'm running Win7 64-bit and currently have the latest IE10 (10.0.9200.16521). When I load a site with video.js installed it fails in standards mode. But works with Flash in quirks mode. Removing video.js in various ways loads the video(s) fine with IE10's HTML5 capabilities. This even actually happens on the videojs.com home page. So far I've tried the following suggestions from other locations...
Use a full path instead of relative URLs.
Change to preload="none"
Running IE after disabling add-ons
Running IE in safe mode
Running IE as a separate user
Numerous other similar things months ago I don't recall.
I have successfully run the site on fresh installs inside virtual machines. And my Win7 64-bit computer at home. But my machine at work, previously with IE9 and now with IE10 does not work. I've seen similar posts so I know I'm not alone. Does anyone have any new suggestions?
A super simple example that exhibits this issue can be found in this other question: video.js videos get stuck in IE9 and IE10, double length on Mac Safari
Update: Found a reference to forcing IE to use Flash. Thought it might be a workaround while trying to get IE to use HTML5. It successfully made other browsers use Flash (in a test to make sure my IE conditional comment wasn't messed up). IE still did not work.
Update 2: I have found other web sites that are totally unrelated that also fail to load. Considering this issue does not happen on a fresh install I may need to resort to an attempt to remove IE and install from a fresh download. Sadly this will not actually locate what is causing this issue so I may hold off and sift through the video.js source. That'll take a LOT of time so if anyone comes up with a solution in the meantime please let everyone know.
It took a few more random shots in the dark (uninstalling plugins, dropping to IE8 and then installing a fresh copy of IE10) before I resorted to sifting through "Related" links on here. But I finally found the solution.
Drop Helvetica from the videojs style sheets.
(And the rest of your styles).
Once I removed all instances of Helvetica from my style sheets everything worked beautifully.
I've known Windows doesn't get along with old Type 1 fonts—like Helvetica (I need it installed since my company's logo is set in it and it's bitten me before). What I didn't realize was that IE9 and IE10 effectively can't render them at all and that's what was killing videojs.
Sadly we can't force users to go out and buy new versions of Helvetica or Helvetica Nueue. So my suggestion is dropping it in favor of "sans-serif".
h1 {
font-family: sans-serif;
}

Text flow out of divs in chrome, but not on all chrome users?

I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.

Did -webkit-backface-visibility break today in Chrome?

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!