Why is an image created with Google's Swiffy blurry on SOME browsers?
Have a weird issue that I hope SOMEONE has an answer for, or at least can oint me in the right direction.
I recently converted my wife's website so that I removed all Flash elements and rendered them in HTML5 via Google's Swiffy tools. The reason for the conversion was that Flash no longer is supported on mobile devices, by default and we didn't want to lose those views.
I converted a flash header, among a few other Flash elements, with swiffy into HTML5 and the resultant code works great, on most browsers. In fact, I'm only having problems with ONE of the Flash elements, and specifically only with ONE of the images related to that Flash element.
The element is simply a set of four images arranged horizontally that transition into other images. There are about 4 images per panel that rotate.
The problem is on panel number 2, the First image comes up EXTREMELY blurry, to the point it is not recognizable, on some browsers. It is only the first image in the sequence.
The weird part is that the image is perfectly clear and fine when viewed with Chrome, Firefox, and Safari (v 6.0.5). BUT if I view it with Safari (v 5.0.6), Samsung's mobile browser found on their Galaxy line of phones, or Mobile Dolphin Browser it comes up blurry for that photo only. If I switch to Chrome's Mobile Browser it looks fine.
Anyone ever experienced this? Anyone have any ideas?
Another detail to note is that the swiffy conversion process encoded the images into the file itself meaning there are no image file references, the images are actually encoded directly into the file.
Any help figuring out this mystery very appreciated.
The site is located at to see an example of what I'm talking about: http://www.drcarolinemin.com