Develop Reference

EXIF Orientation Issue in Safari Mobile

I have an angular 2 application in production environment that allows you to choose a profile picture. Recently, performing tests with safari mobile, specifically for IOS 13.3.1 version(older) and IOS 13.4.1(new) version. I noticed that the image is shown rotated depending of safari browser version used (I built a stackblitz for this that you can review):
IOS 13.3.1 version(older)
IOS 13.4.1(new)
When I take images from an iPhone's in portrait mode and upload the image to my app it is shown rotated only for IOS 13.3.1 version(older). However, I examined the EXIF ​​meta-information images from each of my devices and found that both images have the same value in the orientation property:
IOS 13.3.1 version(older)
IOS 13.4.1(new)
My question is. Why does the image display change depending on the IOS version, knowing that in both cases the orientation EXIF is the same value (6)?
This is a subject that worries me since I had already solved this problem by rotating the image depending of EXIF orientation value for its correct display (e.g. exif.js have been created to handle this situation by detecting the exif orientation flag), but this problem now appears again with the new version of IOS. What would be an example of code that I can use to make it sustainable over time? Is there not a consensus among the browsers to manage the orientation of the images?
What is the explanation for this illogical behavior?
Thank you so much!

We also stumbled upon this when our mobile suddenly behaved differently and finally find the root cause of this.
Both WebKit (iOS) and Android (Chrome) have just recently changed the default behavior of the image-orientation CSS propterty. While it was none before, it is now from-image. This means: Before, they ignored the EXIF data of an image by default, while they are now using it to auto-correct the image. Which break our own auto-correction based on the exifreader library.
Here are some relevant links:
https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/
https://bugs.webkit.org/show_bug.cgi?id=89052
Funny enough, also the Slack team seems to have run into this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1634180
Fortunately, the author of the exifreader library (who just some weeks later ran into the same problems) also guided me to a way to detect the behavior. You can find his answer here:
https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640217716
I also noticed that Modernizr has a test for this, so I am actually using a custom modernizr build now to detect the browser behavior.

The webkit browser is rotating the images before you upload them based on the EXIF data then it gets applied again by your app. We were able to confirm this on new (81) version of Chrome and Mobile Safari on 13.4. then the app is rotating them further and it gets twisted.

Internet Explorer poor gif quality / rendering

I am trying to solve a problem with internet explorer 10. I made a gif animation in photoshop (its only 1mb) and it works in all browsers well, except, Well take a guess... internet explorer. It looks like there is a pixel delay or rendering problem.
Gif animations of other websites doesn't have the problem. I also tried all kinds off different gif formats. Anyone any ideas?
I used the html img element to display
<img src="database.gif" id="myVideo">
here is printscreen of my pc screen in IE10
This is the gif file (Open this page in IE)

HTML5 Image upload and resize on IOS6

I have implemented a way of adding files to a HTML5 app (which IOS6 now allows) and resizing the images before uploading as not to cripple 3G. On chrome running on my Mac everything works fine but when i test in on IOS6 the image is completely squashed and nothing like it should be.
Try this JsFiddle in your browser and mobile browser (IOS6) and it should give you a better idea.
http://jsfiddle.net/Untd8/

See my answer to HTML5 Canvas drawImage ratio bug iOS
Basically it's a limitation in iOS where JPEGs over 2 megapixels are subsampled.

kineticJS sprite animation malfunction in iPad and android browser

I’m having a problem with the use of sprite sheets in mobile browsers (ipad/android), a strange behavior occurs, the stage is multiplied and scaled down multiple times when i click on a sprite animation, everything works fine until the click occurs.
Any hint?
The only browser that it doesn’t occurs is the safari from the ios 6 beta in ipad 2. In the native android browser the error happens but in android chrome everything works fine.
In desktop browsers everything works fine.
UPDATE: the problem is the afterFrame, the error is that the index is not valid. I don't understand... what does the afterFrame? i have 7 frames and it gives error if the after frame is superior to 2...

What version are you using? This sounds like a bug that has been fixed in v4.0.1.
https://github.com/ericdrowell/KineticJS/wiki/Change-Log

Pixastic doesn't work properly in Safari

I'm using the Pixastic javascript library to make several images on a webpage grayscale. It works in Chrome and Firefox, but not in Safari. Sometimes it makes a few random images grayscale, and sometimes it doesn't do anything at all.
Here's a test page to demonstrate the problem: http://www.edwards.nl/new/test.html
I'm using Safari 5.1.1 on Mac OSX Lion.
Does anyone know what the problem is? I couldn't find a solution anywhere yet.
Edit: It appears that the canvas elements are created, but the grayscaling part doesn't work.