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.

Android Tablet paper.js on zoomed canvas

I got problem on Android Tablet (Galaxy Tab 2). When having a big image, and using paper.js to draw paths on it, everything is fine, but when I zoom the image (only if it is big enough), paper.js stops drawing paths on a certain width and height... the image on canvas is still being displayed (background-image with width and height set to 100%), but it seems that paper.js is unable to draw farther than some width and height. Any idea what is going on or how to fix it?
If something isn't well explained, please give me feedback. I really need to get it working. Today.

D3.js transition bug in Firefox?

Take a look at http://jsfiddle.net/EyrRD/. I use D3.js library to animate SVG rectangle by changing its width:
rect.transition().duration(2000).delay(500).ease("cubic-out").attr("width", 500);​
Everything works fine in other browsers, but in Firefox animation suddenly stops when rectangle width reaches 300px. Actually it doesn't matter what is the destination width (>=300), it always stops at 300px. Is that really a bug? If so, how to overcome this? An by the way, is D3.js the best tool for this kind of SVG animations?

You need to set the width of the SVG:
var svg = d3.select("body").append("svg").attr("width", 1000);
In Firefox and maybe other browsers you need to set a width and height for the svg:svg element. It is a Firefox bug, here is my related SO answer.

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.

Getting image dimensions after browser resize

I have a div with a image I want to center inside. The image will be different everytime and has a max-width and max-height css property. Problem is, the image.onload function I use to do the math with the image.width and image.height, gives me the images dimensions before its scaled down by the browser. :( how can I pull this off?

If you mean that you have an image that is, say, 200x200 pixels, and has been resized to (say) 150x150 pixels because of the CSS properties, then image.width and image.height should work fine. That is, they should give you 150x150, and not 200x200. (See here for the mozilla reference.)
Alternately, you could try element.clientWidth and element.clientHeight (https://developer.mozilla.org/en/DOM/element.clientHeight), which give the rendered sizes of any DOM element.
I haven't tested this in IE, but it should work fine there as well. (The MSDN reference page for width is here. You can also find clientWidth there.)
What browser are you testing on?