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.
Related
I've implemented a mobile version of a website http://www.ecss-jobs.com. I've used some media queries at 900px for laptop / medium devices, and 768px for phones / small devices.For Apple devices (safari and chrome), the CSS breaks for the detailed job listing page. I find this very strange as it works perfectly in the Chrome Responsive Design tool when selecting all the Apple devices...It occurs on all iPhones I believe (tested iPhone 7 and iPhone XR), though I'm unable to reproduce it on my desktop. I suspect this is because I'm using a specific CSS attribute which doesn't work for the iOS webkit but I'm only using flexbox so I'd expect this to work.
I'm not sure which parts of the CSS to attach, but the React code is not minified and available from the sources tab. The entire App overview is available at /static/js/App.tsx, and the specific module responsible for this page is at /static/js/components/JobDetails.tsx (from the sources tab). Thank you in advance.
Examples of working and not working are attached below:
Apple broken:
Android working as intended:
I need to display a huge image (at least 2000x2000) on Android with Titanium and let the user scroll around, just like they were using a scroll view on iOS. However, I know Android doesn't support the same kind of scroll view, so I opted to use an ImageView.
I'm unable to display this image properly or at least the way I'd like (without it being blurry when you zoom in) because of memory issues. Has anyone found a way to make large scrollable images work in Titanium on Android without potential memory crashes?
I tried WebView also, but it seemed to resize my image and when you zoomed it was blurry as well. I was hoping Android webview supported SVG, but it looks like they don't on a majority of devices.
This is by far the best answer I've found:
http://www.tenxperts.com/2011/07/13/working-with-large-images-in-android/
I tried it and it works well with Titanium web views.
Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.
Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...
My web application has to support multiple devices. I have written common css for all mobile pad devices, but it is giving some issues on iPad. I found the fix specifically for iPad.
Now I want to separate out css for iPad and galaxy device.
Is there any way to in media queries or any other way to load one css for ipad and another for galaxy device ?
You can do combinations using media queries to detect the device and target your CSS. Devices have a specific set of properties (resolution, orientation, width, height etc.) which you can use media queries to pick them out. Here's MDN's reference and another article for further reference, as well as a similar question
The only media query you can use is the one ask about the size of screen if this isn't enought for some reason (maybe screens are same size or you must know the model) you can work with this script to identify the device and load the relevant css according to the device.
You can very simply detect http request user agents for iOS devices like iPad or iPhone, by comparing them with regular expressions, and include relevant CSS accordingly.
A simple regular expression to detect iPhone/iPad would be :
(iPhone|iPad).*?OS ((\d+)_(\d+))(?:_(\d+))?
if, by 'the fix specifically for iPad', you mean a fix to the installed Safari instance - you should use feature detection.
it's most easy to do so using a designated JS library, i prefer Modernizr.
I was working on an image gallery and it involved some heavy image moving\resizing using javascript. Everything worked like a charm on all the broswers except for IE6\7 (no wonder) and ... Google Chrome.
Basically under certain zooming each movement made Chrome redraw the background, making it jitter, change its position and then move back. I can't post link to the actual script at the moment, but I used a jquery plugin to immitate the problem:
http://danilsk.narod.ru/wtf.html (try zooming in and out and clicking images)
Does anyone know how to fight this?
I am using google chrome and I see no issue here.
Everything is running very smoothly. Try updating your browser.
FYI:
Ubuntu 10.04 LTS - the Lucid Lynx
Google Chrome 8.0.552.215