Scroll through the images in Firefox (tested on v. 26) and you notice if you look to the right that the image stretches one pixel (or so) after its .src has been changed. This behaviour only occurs in Firefox and if the width of the image is increased or decreased by 1px (through web console), the behaviour disappears... I know that the image is bigger than the width I set but it still doesn't explain the behaviour and why it's only occuring at a very specific width (after all, image is still resized in browser if I increase or decrease the width by 1px as well but then the behaviour disappears). Works perfect in Opera, Chome, Safari and IE...
http://www.mosaikdesign.se/galleri_.php
Anyone?
I spent some time researching this and they way I see it, it's a bug.
I filed a bug report at Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=953364
I also made a thorough test page for those interested in studying this behaviour: http://www.blackwinged-angel.com/bugs/index.html
And finally, the fix:
-Set css property image-rendering on the image to something else than auto (optimizequality, optimizespeed, -moz-crisp-edges). It's claimed in the documentation that optimizequality and optimizespeed are the same as auto (https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering) but they do result in different downscaling algorithms being used (see my link for proof). However, this fixes the problem.
-Use image sizes where images are only upscaled, not scaled at all or check the resulting downscaling since it only applies to certain sizes of the containing element in relation to certain actual image sizes, not all.
Again folks, this only applies to Firefox, was tested on Firefox 26, applies to downscaling images on-the-fly in the browser by styling img (and possibly other) elements with width and height and it's not consistent (just happens at about roughly 30% of tested downscalings on a specific image for me).
Related
I was working a with a site and I had know the width of the screen that's why I tried with screen.width but I don't know why I'm getting different result on Firefox and Chrome. Seems Firefox showing me the correct value but Chrome doesn't.
Is there is anyone who can assist me to know whats the reason?
Thanks
The reason is that there is no current standard that defines what the value should be. The closest is the CSSOM View Module, which states that:
The width attribute must return the width of the output device, in CSS pixels.
However, that specification is a Working Draft, which means it is a work in progress and the definition stated may not be what is implemented. Indeed, the Editor's Draft gives two different definitions:
The Web-exposed screen area is one of the following:
The area of the output device, in CSS pixels.
The area of the viewport, in CSS pixels.
So obviously, browser vendors are taking whichever definition they want.
For more discussion on that property, see PPK's rant "screen.width is useless" on Quirks Mode
i have a panel that should be drawn floating over the normal html page.
This object is dynamically created on DOMloaded event and scaled to fit current screen resolution depending on the zoom level of page.
In order to obtain that we have to scale the element, because we fix the width and height.
The scale amount in not mobile friendly website is always bigger than 1. It seems to work in all browsers except for Safari mobile, in which the floating panel is blurry.
How can i solve this problem?
It is the device, not the browser. iPhones have retina displays, which, in plain words, means that the pixels are doubled. Fonts, borders and other CSS styles scale up fine, but images are stretched, that's the reason your image appears blurred.
The simplest way to fix this is to use a bigger image
Of course this has the drawback that well... you will be using a bigger image for all devices/browsers even if you don't need one. Of course, there are many other ways to handle this.
Here is a place to start:
https://www.smashingmagazine.com/2012/08/towards-retina-web/
http://www.mightybytes.com/blog/make-retina-images-website/
We have a website whose background is a stack of images through which we go with JavaScript.
We check whether the next image is loaded before switching to it, and it works fine on Chrome, Safari, IE, and all mobile browsers, however on Firefox we sometimes get a white flash.
This problem also happens if we make sure that all the images are preloaded so it's not a problem that FF shows the image before it has finished loading. I've seen the question asked elsewhere but from the user's perspective, and the solution was to disable hardware graphics acceleration, which does not solve completely the problem but reduces it. However we obviously can't ask that from our users.
Similar problems were reported in other questions:
jquery animate (height) causes background-image flickering in firefox
Image Flickering only in Firefox
Firefox background image flickering when using multiple instances and background-size
skrollr background image flicker in Firefox
However none has a clear solution. Does anyone know how to correct for this?
Cheers!
On a site of mine, my client is reporting that images that are reduced in size by code (i.e. specified a width/height) are appearing jagged and pixellated. I have asked her what browser she uses and inevitably it's Internet Explorer.
Is there a way to optimise images in IE or do I need to manually resize the images on photoshop before I put them on the site?
The images in question are resized from 220x220 to 80x80 and I have javascript that expands them to 220x220 upon clicking.
Resizing down or up in a browser can look terrible. It varies from browser to browser, but apparently IE is the worst.
It's best to either write a server side script to create thumbnails, or to manually do it yourself if quality of the image is important. It also saves bandwidth as you don't need to load the big image and only display 1/10th of the pixels.
You should avoid using width and height for resizing. It'll cause a longer loading time (on slow connections and big images).
A better idea is making thumbnails (with Photoshop for example) and use the "Web save" option to reduce the size even more.
http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/
Bicubic image resampling is turned off by default in IE. You can use this to turn it on in your reset stylesheet:
img
{
-ms-interpolation-mode: bicubic;
}
use timthumb, it will create thumbnails for you, you just need to link to the script, and specify the size of the thumbnail and that's it. http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
i'm using it on one of my sites -> http://iv-designs.org/
you can see the images are clean and not pixelated.
Assuming your images are JPEGs, the easiest option is to use IE7's bicubic image resizing feature, which you can turn on using CSS:
img { -ms-interpolation-mode: bicubic; }
Be aware that it's got performance implications (using it a lot will slow the browser down). It also has no effect in IE6, and is no longer needed in IE8.
Another way (which does work in IE6) is to use Ethan Marcotte's wonderful Fluid Images script, which uses some damn clever CSS filters to fix the problem in IE6 and 7. My own variation on the theme fixes the right click problem, but requires jQuery.
EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.
You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup
Can't reproduce, works fine here in Mac OSX + Firefox 3.5.
I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.
I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.
I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.