I have a problem with image quality in Firefox: Firefox seems
to zoom "everything" per default so some images really look
fuzzy while in chrome their quality is perfect!
I found out, that there is a setting in Firefox, which resolves the problem:
"View->Zoom->Zoom Text only".
Do you know a way to force Firefox to use this setting for a special
website (using javascript)??
Thanks a lot
Bye
No, because that's a setting for users, who may have poor eyesight and want to actually see the images on your site. It's not for you to make that decision on their behalf.
Related
If this can be detected - is there a possibility to influence colors by CSS classes or JavaScript?
With the dark reader extension, it is also possible to submit adjustments. Hope that it is also possible here, if nothing else could change it.
Samsung Internet does strange things with colors in night mode. If you’re aware of them, you can sort of workaround any issues. I’ve not found a way to detect it, though. The color filtering takes place late in the rendering process so APIs aren’t updated. The obvious methods (such as window.getComputedStyle) returns original colors.
Recently a large number of users of my company's website have reported seeing black boxes on some images on our login page.
For example:
I've searched for solutions, and everyone suggests turning off Hardware acceleration in Chrome by going to Settings | Advanced | Use hardware acceleration when available and disabling this option, which of course I don't want to have to tell users of our website to do!
It seems like this has been an on again/off again issue in Chrome since 2015.
Is there a way to avoid this issue using CSS, different image formats, or directives of some sort?
EDIT: Some Additional information
It's definitely reproducible on different machines running the same version of Chrome, with no extensions installed, with a new profile user, and in Incognito mode. But not on all machines - only some.
The images in question are being loaded from a CSS Image sprite.
Here's a dump of my GPU info, which has this issue.
I've found 2 different solutions for our situation:
Remove the border-radius css attribute from styling these images
Stop using a CSS Image Sprite, and use an image or font instead to load these images from.
I am developing a very game-like web application, and there is a particular requirement that is driving me nuts: I have to show an image for a very short (some hundreds of ms, sometimes even just 25ms, just enough for the user to perceive something when he/she already knows what to look for). This application has to work on Chrome, Firefox and IE9+, but also Android tablets and iPad.
The only reliable way of doing this in desktop browsers I have found is Flash. Using Javascript and html5 canvas in a lot of computers results in the items not even being rendered. On the other hand, Flash doesn't work on the iPad and some Androids, but in those devices, our tests show, the javascript way seems to work just fine. So this is the best solution I have found: grosso modo, if iPad then load_javascript_version() else load_flash_version().
Have you seen anything like this done before? Should I abandon any hope of finding a more maintainable solution?
Thanks a lot.
Haven't tried this particular use case, but a 2D library like KineticJS should be able to do what you need.
There are jQuery functions like timeout: http://www.jquery4u.com/jquery-functions/settimeout-example/ and delay: http://api.jquery.com/delay/
Are you using RequestAnimationFrame in your game loop? If not please read about it and ensure that your image is preloaded when you try to render it.
Mozilla dev RAF api
Most devices and browsers that have hardware accelerated canvas support, should be able to achive as fast as 60 fps fairly, which means you would be able to show an image for a single frame or about 16.7 ms.
I have managed to do similar things using the createjs library which can very easily be set to use the RequestAnimationFrame api.
Createjs ticker RAF
I have been working on an experiment to render HTML into a canvas image, by having javascript read all the necessary information from the loaded DOM. As canvas lacks many of the standard parts of CSS, especially when it comes to text formatting, a lot of work arounds and performance intense processes need to be done (letter-spacing for one). The intent is and never will be to make a fool proof HTML renderer, as it simply won't be possible, but instead try and make as accurate as it can be.
For the sample pages, Google Chrome usually loads them significantly faster than FF. However, for some pages (usually the bigger ones), Chrome completely freezes, where as Firefox loads them fine. Now, I have been trying to pinpoint where exactly things go haywire, but haven't had much luck as it doesn't end up outputting anything in Chrome.
Does Chrome have some limit of how many canvas draws can be performed within a certain time span, or how much system resources a page can use? How can I start untangling the bottleneck if I can't get any sort of feedback from the page at all (as it just hangs up)?
Examples (what it should do, is render a canvas image on top of the page, which should look more or less same than the actual HTML page. You can toggle the canvas image (show/hide) by clicking it. Please don't open them either if you got unsaved work in your browsers, as it may end up hanging them as well.):
simple test, works fine in FF/Chrome
another simple test, works fine in FF/Chrome
Complete page, works fine in FF/Chrome
Complete page, only works in FF < 4, Chrome freezes
They all use the same js which can be found here.
I am not looking for a blazing fast script, as with the type of emulation this renders the images, I don't think it could even be done. Simply trying to find ways to make it perhaps slightly more efficient, without losing any of its current functionality.
Where to begin?
Break it down.
Use the same example and cut how much you do it it (your rendering code) in half. Does it still not work? In half again, etc. Did it work? Put back half of what you took out.
As in, get rid of all attempted text rendering, or all border/padding code. Just comment it out. Does it work then?
Or try just commenting out ctx.drawImage(img,x,y); on line 199 and nothing else. Does it work then?
If you're lucky you'll be able to determine a critical point where Chrome is spending a lot of time doing something.
Have you tried using Chrome's built-in performance profiler?
The problem appeared to be with the css attribute background-repeat, and specifically repeat-x. Commenting out
for(bgx=(x+background_position_left);bgx<=w;){
drawImage(image,bgx,(y+background_position_top));
bgx = bgx+image.width;
}
Fixed the issue at least for chrome, and looking at that it most likely was an endless loop as Kinlan proposed, but why exactly it gets stuck only on newer versions of FF and chrome is something I'll need to look more in detail (most likely not having the image.width available yet, or something similar).
I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?
Some things i would need
Framecontrol. A way to get the current time (or delta).
Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
Input A way to lock it in a box (like flash does) is cool.
Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
Bottlenecks. What are things that will kill the CPU?
Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.
I'm going to answer this looking at things from a mootools javascript perspective:
Framecontrol. A way to get the current time (or delta).
periodical()
Image, displaying it and moving it. How do i display full image.
setStyles()
Input A way to lock it in a box (like
flash does) is cool.
Plain old CSS
Sound play simple sounds on demand
(like when i get a hit).
Swiff, remote();
Bottlenecks. What are things that will
kill the CPU?
Internet Explorer.
Restrictions.
3D ... ?
What are good things i can do ... to
lower glitch or compatibility
problems.
Use a framework.
As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.
For some examples of games in javascript:
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
http://my.opera.com/WebApplications/blog/show.dml/200788
This one is interesting, it is demos of games using the canvas element.
http://www.canvasdemos.com/tag/games/
The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.
Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.
The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)
This may help a lot:
http://benfirshman.com/projects/jsnes/
its an online NES emulator that renders everything on screen - the source is also available
Hope that helps =)