I'm working on a script and have an issue with Chrome.
Here's what I'm doing:
1. Loading large images into a DIV.
2. Scaling the images to fit the size of the DIV.
3. When the browser is resized, the image is scaled up and down with the browser.
Everything is working 100% in all browsers except Chrome.
I've checked the profiler in Chrome and don't see anything unusual.
These are large images, however are working just fine (even live) in all other browsers.
I've read a ton of places that have noted this issue when using down-sized images in Chrome...but not solution.
Nothing special going on, just using a
var img=new Image();
$(img).load(function(){ .... {);
Does anyone know of a workaround or solution that will work in Chrome?
Thanks!
So it appears that Chrome just sucks when it comes to handling large images and even images that aren't large, but just scaled down. I've searched around endlessly only to find similar questions without resolutions.
Still not sure why all other browsers (even IE 7 and 8) can handle large images (tested with 7mb scaled-down PNGs), but Chrome can't even manage to do a 700kb scaled-down JPG without lagging.
So, I'm answering this question with: in this instance, Chrome sucks.
I had exactly the same problem, but recently solved it. Huge amounth of performance takes up chrome's anti-aliasing, because it recalculates the entire image whenever you resize it.
So to solve it you just add this line to the css if your image:
#myImage
{
image-rendering: -webkit-optimize-contrast;
}
You can turn it off by javascript when the image is still.
More about anti-aliasing: Disable antialising when scaling images
How are you resizing the images? Using height/width or CSS transforms? The latter might result in better performance.
Some info:
Improving the Performance of your HTML5 App
When you're profiling issues with image resizes and decodes in Chrome, it's best to use the Developer Tools Timeline for this as it can give you relatively accurate stats on exactly what took a long time to be decoded.
Downsizing (or re-sizing) involves Chrome having to both decode the image (JPEG/PNG/GIF) you're sending down the line and then do extra work to resize that image into the container (div) that you would like to display it in. Where possible, the advice from the Chrome team is to prescale your images to the correct width/height needed.
Now you might be wondering: well, surely this issue is just down to desktop Chrome sucking, right? It's not as clear-cut as that. Particularly on mobile devices where browsers have less access to a powerful GPU/CPU, it's going to be costly to perform those resize operations there as well. So in short: yes, rescaling large images can be slow in Chrome sometimes. Try to prescale where possible and these performance bottlenecks should disappear.
Related
I'm designing a website that has a lot of high quality images. Right now, I've got the images set at 1000px x 1000px. A majority of them are .png with transparency. I've noticed that as some browsers scale DOWN the images, they pixelate the images pretty severely. I've noticed this already in Internet Explorer and Microsoft Edge; however, in firefox and chrome the images look great
Question
I was curious if there was a html/css/javascript method of preventing that from happening?
I will eventually put a system in place that loads a different size image based on width of window; however, for now I'm hoping there is an easy solution available for this.
Sorry if this is a duplicate. Every time I search for this, people are asking about scaling UP images. I couldn't find anything about how browsers effect scaling DOWN images that had a solution.
EDIT
I was asked for the code and I will post the code associated with the images; however, I don't forsee it being a css code issue as it is only effected on certain browers (the two I've noticed are IE and Microsft Edge)
Its fairly basic code
#tribox_1 img,#tribox_2 img,#tribox_3 img { clear: left; width: 50%; height: auto; }
I am having issues trying to load my site, http://www.internhacks.io/, on any mobile browser.
The project can be found here on Github.
I have tested the site on mobile using Chrome dev tools, and everything loads fine/acts responsively.
However, when testing the site on my actual phone, sometimes the site does not load at all, sometimes only partially.
Note: the apply button is not meant to do anything yet
I think it may have to do with having a large image as the background. Should I be serving a smaller version if detecting the window is smaller? The img height is set to 100vh.
If anyone knows what might be causing this, or knows of a better way to debug the site on mobile than in Chrome dev tools, please let me know!
I use Opera mini to test mobile devices (aka android) with various screen resolutions.
"height is set to 100vh" huh? never saw that one before. To fit graphics within space available, avoid fixed sizes (aka 100px) and I use relative width:xx%
YES, it's wasteful to send large graphics to a mobile device and from the server, you need to send some xxx-low-res.img instead
it's helpful to load JS scripts into a section to allow all objects to be loaded first.
I think your main issues is that the big images should use smaller, light-weight pictures instead since it'll speed up the resize process when rendering on the phone. Other than that, you want to stick away from, as #jobeard mentioned, from using fixed sizes like the 100vh and use a relative width such as 10%.
I'm facing this problem only in chrome. When I scroll up and down, I'm facing lag. This only happens in Chrome browser and I have the latest version. Website is based on PHP framework. Could anyone please identify the problem? Is there a problem with the website or the browser? Here is the website link: http://airfuz.com
Thanks in advance.
I would say that one cause is the massive image in the center. (the guy with the google glass) - this image is more than 5000px X 3400px+ but scaled down to around 500px. Which is together with other large images on the page. http://airfuz.com/Images/2014/05/man-wearing-google-glass.jpg
when i remove that image, it scrolls much smoother...
Consider using a php thumbnailing script (like timthumb or phpthumb) to actually serve images close to the size they will be shown. This will also benefit the load times of the site.
Your website has too large assets that simultaneously loads. Maybe that is the cause of the problem. Here's why I've concluded with this answer:
When the website's assets are loading, the scrolling lags. (Tested with Chrome & Firefox)
After the website has fully loaded, my Google Chrome shows less lag. While on the other hand, Firefox showed me no difference at all.
You could shrink down some assets, I think that will, somehow, lessen the lag.
And I noticed something about your website, you are using the HTML5 Doctype. However you are also using HTML4 Mark-up Tags (I saw the <center> tag). Well, this might not affect the problem but this will affect HTML5 Validity. =)
Well, hope I helped somehow.
Google Chrome notorious bug Issue 753053
Okay, so I'm running into a weird issue with a game I'm developing all of the sudden, I'm just wondering if anyone has seen something like this before:
When my window is sized below ~600,000 pixels, it runs very smooth. This is a profile taken at 989x610px:
When my windows is sized a little bit up from that, it slows to a halt, using 99% CPU and running at like 7fps. This was taken at 990x610px (1px wider):
The 990 isn't hard-coded anywhere, because the exact width that it slows down at is dependent on the height, it's more of a "total pixels" thing.
Anyway, I'm just wondering if anyone has seen this before, if it's a known issue, or if I should be filing a bug report with the chrome team.
When your window is that size or when your canvas is that size?
Either way I'm guessing its merely a Chrome bug and you should file a bug report. You should also test to see if its working on Chrome Canary.
There have been similar bugs in the past, such as this still-not-fixed bugs in Chrome for Android where the canvas has distinct functionality above and below 64k total pixels (see bugs here and here)
The issue discussed in this question happened to me with a production site, but in addition to Firefox, we saw it in IE.
This is how it should look, with all three fading to different pictures intermittently:
We got these screenshots from clients:
Abmormally small images:
Weird sized images:
We were able to reproduce it reliably with Firefox with a hard refresh (ctrl-f5), but the only one in our office that could reproduce it in IE was running IE8 on Windows 7, and then not reliably. The client was using IE7, I believe on XP.
I fixed it by setting up the slideshow in $(window).load() instead of $(document).ready(), but I never figured out why it was so hard to reproduce in IE. Management is unsettled by the fact that we could not reliably reproduce it in IE or explain why it happened, and I've been asked to investigate.
Does anyone have an idea? Does the same issue discussed in the linked question apply to IE in certain circumstances? All I can say at this point is "we can't always pin down things like this."
UPDATE: I was able to make it happen reliably in IE by not setting the src attributes in the slideshows until after I set up the slideshow in Javascript. I think this proves it was indeed the same timing issue, just happening more rarely because IE is a different rendering engine. Management is still curious what other circumstances intervened, but I'm confident now that it was indeed a timing issue in all browsers, and our production site is safe from further issues.
Also, I asked the same question on jQuery forums here and was told to explicitly set image sizes in the img elements. This also fixed the issue.
It's explained in the link you posted. It's a timing issue. Sometime the cycle starts early, sometimes not. And 'sometimes' may just be 'almost never' in some browsers.
Starting the cycle in document.ready ensures that all images have been loaded before the cycle starts so the dimensions are properly detected.
It can very well depend on CPU speed, network latency, browser, OS and whatnot.
The reason it's so hard to reproduce consistently is because the environment is very complex, and the results depend on things you don't see right away.
I know this is late in the game, but I, too very recently experienced this problem. It drove me nuts. The solution is, in fact to use the $(window).load event method to start the cycle plugin--it guarantees that all associated page-load activity (including any downloads associated with ANY child elements) is complete before it fires. It works in all of the 'big five' browsers.
In my case, I am displaying images of different sizes and aspect ratios, and populating the image list automatically by using a server-side script to populate a variable containing dynamically created tags for all the image types in a designated directory that I tell it to include. Consequently, I can't include the image width and height in the tags, because I don't know what they are. In order to get around this, at the client side I use cycle's onbefore: to fire a script that dynamically looks at the image being processed and then sets the slideshow container to a width and height matching the photo's native width and height. I display a "Loading xx photos..." message with an animated GIF loader graphic so that the user knows something is going on while the images are downloaded.
The slideshow(s) in question reside in an area on the hangmanhills.org website that is restricted to Hangman Hills Residents' Association members only, so I can't show you the end product.