We Keep Coding

SVG mobile orientation change

I'm working on an SVG and so far all is well, except for one issue.
Normally, in the absence of width/height attributes on the root element, the SVG will scale to fill the viewport.
However on mobile, I notice that changing orientation breaks this functionality. When rotating from portrait to landscape, the original screen width becomes the width of the viewport and the SVG goes way off the bottom. Rotating back gives the opposite problem, resulting in a very small SVG.
This does not happen on desktop, when resizing the browser window - the SVG correctly adjusts its scale so it fills the available space.
How can I force the SVG scale to recalculate correctly when screen orientation changes?

The issue has been resolved by forcing a redraw. This can be done by performing any operation that causes the SVG to change somehow, even if that "change" is a no-op.
In this case...
window.addEventListener('resize',function() {
svg.setAttribute("x",0);
});
... worked just fine.

CSS transform on image getting pixelated

I'm resizing an image with setting the width/height dynamicly with css and using transform duration to smooth this process. However it is working but once the animation started the image gets pixelated. Occurs in Firefox and Chrome, i didnt test any other browsers.

Your height is fixed, before and after the resize, it could have something to do with it?
Try and amend the javascript to also set the final height of the div, if you want to maintain aspect ratio, see http://andrew.hedges.name/experiments/aspect_ratio/
from the initial 350x64 the final dimension should be 250x46

SVG disappears in firefox on transform

In Safari all is well, in Firefox, the svg is not the correct size and when I transform it, it disappears. I'm running Safari Mac 5.1.7 and Firefox Mac 15.0.
The code was created with d3 but I've just supplied the html.
Now you see it: http://bl.ocks.org/3531350
Now you don't: http://bl.ocks.org/3531267 (edited so it works now)
I imagine I have made a foolish mistake somewhere but I just can't see it!

I can see the svg at the bottom of the grey area if I add height and width attributes of 100% to the outer svg element. They do really need to be there if you are using svg embedded in html. I suspect Safari will require width/height in embedded svg at some point.

Scaled Transparent PNGs lose anti-aliasing after jQuery animation in Webkit browsers

I have a script that lays out these circular icons on the map, you hover over them, they spring up, text appears, etc. The icons are scaled relative to their position on the map, ie, the distance from 0 on the y-axis. I've tried to set the scale through CSS's width and height attributes and through the html width & heights on the img tag and still have the same problem:
Basically, in their dormant state, such as when the page is first loaded, or the user flicks between tabs, the images (trans' PNGs) are anti-aliased. However, when the hover() function, and thus the animate() function, is invoked, the images suddenly become jagged and horrid. I've noticed that this behaviour doesn't exist in firefox but does in safari and chrome. I don't know whether this is to do with Webkit, jQuery or just javascript itself but maybe someone could shine some light as google resulted in nothing. Any thoughts? :)
Please also note that the bottom left and bottom right icons look fine in both attached screenshots- they're unscaled ones!
Thanks a lot :)
Matt

i can only guess on this, but my assumption is that gecko and webkit use different scaling algorithms for images. thus it has nothing to do with javascript, jquery or png at all.
in fact, the image still has antialiased edges even in the webkit screenshot. (you see that when you zoom in)
the border is just messed up which is usually the result of a bad scaling algorithm.
try the following to confirm this assumption:
<img src="youricon.png" width="90%" height="90%">
and compare the result in the two browsers. you should see the same problem.
possible solutions:
make a smaller version of the image and replace image with the smaller one on hover instead of scaling it.
use a scalable vector graphics format like SVG for your icons.

image resize gives slight, brief, pixelation in WebKit browsers

jsfiddle: http://jsfiddle.net/UenFN/. Notice the slight, brief pixelation after the animation. This error only happens in WebKit browsers.
Using jQuery, I have an image resize into a smaller one. The new dimensions are precisely half of the old ones. Right after resizing, however, the image appears slightly pixelated, then about 2 seconds later it looks better.
How can I fix this problem?
EDIT: Still no progress. Any idea is appreciated.

The solution is to enable the Hardware Acceleration in Webkit.
img {
-webkit-transform: translate3d(0, 0, 0);
}
I have a small library which resize image and HTML to always fit the parent div. Safari bugged me with its own unique way to do a quick and dirty pass before doing the bicubic one. Forcing the hardware acceleration solved the issue, In my case as I do a lot of resizing I do notice some performance degradation yet in the end the overhaul result is more appealing.
You can test this fix here: http://www.visualfox.me/app/nanjing-2014
Under Safari the image used as a mask is never pixelated, regardless of the resizing, upscale or downscale (just resize the browser to test it). You can compare that with this other demo which doesn't use the fix: http://www.visualfox.me/app/bold
Notice how the logo is temporally pixelated when you resize the browser.
my! enjoy!

I discovered that the only time it does not do it is when the size upon completion is the native image size.
from 150 to 300 pixels, no pixelation...
http://jsfiddle.net/UenFN/1/
and from 450 to 300 pixels, still no pixelation...
http://jsfiddle.net/UenFN/2/
So the fix, or workaround, would be to make sure your final size is the native image size wherever possible.

You could use an image appropriate to the dimensions you are going for.
If you can't do that then you could use a callback method to replace the resized image with an image that is the size of the new dimensions. What you are doing is no different than stretching an image (in fact thats exactly what you're doing) so there is going to be pixelation.

In order to fix this, I inserted the same image a second time, but with the dimensions I want to use. At the millisecond after the animation, I replace the main image with the previously hidden image.
jsfiddle: http://jsfiddle.net/wLwrc/1/

Solved in 2013. https://bugs.webkit.org/show_bug.cgi?id=74600
image-rendering: optimizeQuality;

I had the exact same problem. I changed the *.jpg that I was animating the size of, to a *.svg and the pixelation went away.