I'm currently putting together a website on bluehost, and we have an animated GIF for our home page. The GIF is around 450KB in size, with a resolution of 1500 x 600. Currently the webpage is simple with the GIF on it and a few buttons that dont really do anything. The GIF lodas nice and smoothly, but when I observe my system resources, that Chrome tab start to spike in memory usage, and goes pretty much all the way up to 750MB. (WHICH IS RIDICULOUS).
We have tried this on many different platforms and the same result occurs. We tried using other browsers, but do not come across this problem. I understand that the GIF has a large resolution, but I still find it ridiculous that it consumed that much memory space. Anyone had this problem before?
Related
after visiting a website for a long time, and leaving another open during that time, it seems that the layout of the first, appears on the second. It happens mainly when using chrome, but once the issue appears on chrome, it is as if it stays in memory, and happens in firefox too. I read about memory leaks, but I am not sure that this is the issue, and if I am the only one that has it. I mainly see it happening on the website that I am working on which is why it is an issue, but it happens on the black bars of facebook, and another website called jeuxvideo.com . (This is the template my website uses: http://themes.alessioatzeni.com/html/brushed/).
Here is an image showing the issue, where the layout of youtube overlays another website (the transparent grid you can see over the rest of the website):
http://i.imgur.com/FQW7Jin.jpg
Is this a bug with chrome? Because I have looked everywhere and it doesn't seem that anyone else has this issue, or maybe it is just my computer?
This is probably image persistence, where the colours in the monitor get "stuck" temporarily after being on or off for a long time. The fix would be to upgrade the monitor.
You could confirm this by taking a screenshot while the problem is happening. If you don't see it in the screen shot (try moving the screenshot around the monitor when you see the problem, do the affected areas of the screen move too? or are the artefacts stuck in place?) then the problem is with the hardware.
I'm working on a site where the client requested a video fill a div as the background. I have it in and working for myself but they keep complaining that they can't scroll. I have no issues on multiple computers scrolling. Is there some sort of common issue other than a slow machine that would cause this? Could it be a CSS issue? The staging site is here if it helps: http://arkroyal.staging.wpengine.com/
UPDATE
I am using a video hosting service and it seems this is only happening when the flash fallback is in there... I have set it to flash be default now and I can not scroll when my mouse is over it. So now I guess this is a flash issue?
I agree with user3285910's answer, however, that's not to say there isn't anything you can do about it.
When I first went I didn't not attempt to scroll, I just let the entire page load. Afterwards I checked the load times for the media, the Winsta MP4 took 27.36 seconds to load. That's in Chrome on a T1 line. I used Chrome because the webkit browsers are known for their laggy video lading.
With that information I would look at changing the preload value for the <video>. Currently it's "none". There are a lot of different approaches to preloading data and you cannot account for everyone's PC speed, bandwidth, etc.
I would recommend letting the browser determine their capabilities for you and adjusting accordingly. Usually 5-7 seconds of preload is enough to get around the jumping behavior. Here is a link to an article that goes into more detail with analysis.
After looking at the staging site, it doesn't seem to be an issue with the site itself, but more the video you are using. The video is high quality and will cause systems to slow down drastically. If this is the video they want as the BG, I would see if you couldn't get the video resolution lowered drastically, as this will cause issues in the rendering on some systems. This will also make users unable to scroll down the page, because their video card is busy trying to render the images that are being produced by the BG video.
I don't know if this is a bug or if it just needs to be called a rendering issue, but it's annoying.
If you have a 3d translated object, within that you have a scaled object, if that scaled object exceeds a certain size it just disappears. This is what I mean: http://dabblet.com/gist/4563584 (hover the a and wait to see it disappear)
I googled and searched a lot, but to no avail.
You might think: why? Because I am making an impress.js slideshow, and it needs to zoom a lot, but when using 3d transforms to hardware accelerate, object are cached as an images to save memory or something, I get that, but the big one is still visible when completely zoomed in, and it gets blurry (because it's cached at a small size), scaling and zooming out fixes that problem, but then it disappears...
I haven't found any other way to fix the blurry text issues without the scale, any help on that is also welcome.
Using google chrome 24.0.1312.52
Firefox 16.0.2 is working fine
Yeah it's a Chrome bug, doesn't happen in Firefox/IE/Safari. Been around for a while.
The issue has been reported to Chromium several times, here's the most recent one:
https://code.google.com/p/chromium/issues/detail?id=337493
I am running into a random issue in a website that I am working. This website contains many images and some images are 1Mb in size or bigger. The site also uses some CSS3 tricks, like 3D rotations.
Since I added this 3D CSS stuff, I noticed a problem in Google Chrome where some random areas in the website are not rendered.
This is a screen-shoot of how the site should be rendered, the green lines are because I've enabled the "Composited render layer borders" on chrome://flags:
And this is how it get rendered when the issue happens:
This white squares appear randomly and they can disappear or reappear in another place if the scroll the website. I also noticed that this problem is more common in lower-end computers so I my guess is that somehow Chrome is running out of GPU memory.
Why this problem happens? and is the any workaround for it (besides disabling the 3d CSS)?
In case it helps, this is the website:
http://colocation.cubo.cc/cheetos/masterbrand/
Update:
I raised a issue for the Chrome team.
I couldn't reproduce this problem in the Chrome Canary.
It was a Chrome Issue, and its fixed now:
http://code.google.com/p/chromium/issues/detail?id=121779
I can only congratulate the Chrome team for pushing bugfixes so fast, I wish IE was like this.
I have a huge performance problems displaying (that's it, just loading the page is enough for my cpu to go apeshit) this website in Google Chrome: CPU usage goes as high as 90%.
Figured it's the huge PNG sprite causing it, it's 700x24600 and 5190kb, is there anything I could do apart from waiting for Chrome team to fix their code? And other than doing something like storing each "frame" in a different file?
Note that there are no problems with FireFox, MS Internet Explorer, Opera and even Safari.
That is a really large image. It hangs for me in both Chrome and Firefox. Regardless of hanging issues, even if it loaded successfully, the load time of your page is going to be seriously impaired by such a large image. Unless you really think that the value of the image as it stands outweighs the time it takes to load, I would consider replacing it with something much smaller.
However you might try optimizing it first. Have you used any lossless compression tools such as optipng to see if that has much of an impact reducing the size?
Believe it or not, when I made that sprite horizontal, it stopped lagging.
// edit
ok, not really, after refreshing the page it started lagging again..