Firefox Image Performance - javascript

I'm going steadily more mad if this continues:
Firefox versions 6 - 13 seem to have serious image-rendering performance issues on Mac and Windows XP.
Whether I move multiple Images around in a DIV via position: absolute; left: Xpx or using CSS3 transform: translateX(Xpx); or even in a canvas element the images stutter heavily while being moved around.
You can check my latest Canvas test here: http://jsfiddle.net/5YCmH/6/
My question is; why is this happening?
As I see and read it on the web CSS3 and Canvas should be hardware accelerated by now.
So I checked the various settings in about:config and even reset them to default. Nothing works. While Safari and Chrome are rendering everything smoothly, Firefox looks like IE7.
I tested on 3 different machines, same problem everywhere. Whats happening people?
Any pointers or insight would be helpful!
PS:
I haven't used FF much since I switched to Chrome like one year ago. Before that I made an image sliding widget and tested it in FF 3.6.xx and it worked smoothly (using the position: absolute; left: xx; approach). Now I'm testing code I primarily developed in WebKit browsers also in FF and it doesn't work at all.
Is this real life? I feel funny.
EDIT:
Here's another fiddle showing the same stuttering with old-school animation: http://jsfiddle.net/XZAE6/3/
And with CSS3 translateX(): http://jsfiddle.net/h3UNk/3/

To answer your question: Yes, this is real life... ;)

The problem could possibly be remedied by using smaller images. Your aquatics.jpg is 193 kilobytes and velodrome.jpg 140 kilobytes. I'm sure the size can be reduced by at least 50 % without noticeable loss of image quality.

Related

A problem repeatedly occurred on safari IOS how to fix?

I am getting so annoyed with this problem (A problem repeatedly occurred error message) on ios iphone. Working hard to build a website but only iphone with recent ios versions has this problem. Thought chrome will load the site on iphone but same problem. It's some ios efficiency issues. Getting rid of css transform and animation didn't solve it for me. My site was designed on adobe xd and I exported it using web export and got some javascript to scale it for any display size. I don't know how the page artboard size was too big like width: 3554px and height: 2346px. Never faced any problem on windows and android. Recently iphone testing made me so disappointed. The javascript isn't causing the problem here even though there is transform scaling involved. I tested an initial version of the website where the javascript scaling didn't cause any problem. Then I cleaned up all animations and css transform. But still same problem. Is this because of big page size like width 3554px ...? Can't safari handle this ...? Please help me to solve it. I don't want visitors from iphone get disappointed on my website. I have some article pages which use css media query with like page width 2358px less than the home page. I don't have iphone but checked on friend's iphone that the article pages load but home page doesn't load. Fun fact I have this thing implemented like when you auto rotate webpage will go to full desktop site. Both home and article pages have same problem. But old ios versions didn't show this problem. If you have an iphone please check the links if you know what is the reason behind this. Thanks in advance everyone ... help needed ...
Home page
https://elomymelo.com/index.html
Article page
https://elomymelo.com/jbl%20flip%206%20meaningful%20upgrade.html
I don't have mac book. So if you got mac on latest os and safari please check it and let me know if there is this problem on mac os or not ...
CSS
#Web_1920__1 {
position: absolute;
width: 3554px;
height: 2346px;
border: 0px grey solid;
background-color: rgba(255,255,255,1);
overflow: visible;
--web-view-name: Web 1920 – 1;
--web-view-id: Web_1920__1;
--web-scale-to-fit: true;
--web-scale-to-fit-type: width;
--web-scale-on-resize: true;
--web-center-horizontally: true;
--web-enable-deep-linking: true;
}
Those variables are for javascript and they're not causing the mentioned problem in the title ...
I've been debugging a similar issue reported by our userbase of individuals experiencing Safari on iOS 15.4.1 / 15.5 crashing with this error message of "A problem repeatedly occurred"
After some investigation, I've discovered that the issues likely has to due with iOS/Safari's update to WebGL 2.0 / WebGL for Metal, and issues with CSS #keyframes animations.
Specifically in regards to the issue I was experiencing, if there is a child element that has a CSS opacity rule applied to it within a parent element that has a CSS #keyframes animation applied to it, Safari would crash after several seconds and display this error.
If I removed the CSS opacity styling rule from the child element within this parent element that has the #keyframes css animation applied to it, OR if I just removed the css #keyframes animation styling rule from the parent element itself, this resolved the issue and the crash no longer occurs.
This issue does not appear to affect iPadOS 15.4.1, only iOS 15.4.1 or greater.
There's definitely some bugs that reside in this latest iOS / Safari update and I believe they are all related to this new WebGL 2.0 / WebGL for Metal integration (as per similar issues I read about here and here)
I have also reported this issue on the Apple Support forums, in hopes that they will address this in a future update.

Major slowdown seen in Pixi.js with Chrome VS Firefox?

I've been using the Phaser.io 2 game engine which runs on Pixi.js as it's primary renderer. However, I've seen some stuttering in the rendering methods directly that I can't seem to pin down. On Chrome, I've managed to smooth things out but not precisely, while on Firefox things run very smoothly, and apparently in other browser and mini-browsers as well.
Today, I recorded a gif of the effect with the main Pixi.js site open in both:
https://i.gyazo.com/23ede3852844317c3abda424a06b9adc.mp4
I have asked others to look at the rendering on Chrome and they have also seen this stuttering, however in the gif, with Chrome on the left and Firefox on the right, it's very obvious something is not correct.
Is there any possible cause that should be looked at, or known issues?
Try enabling hardware acceleration in Chrome settings->search 'hardware acceleration'

Browsers pixelate images when scaling them DOWN

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; }

Chrome canvas rendering speed bug?

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)

Down-Sized Images are Slow in Chrome

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.

Categories