Images uploaded from mobile rotated in Chrome and Firefox on Desktop - javascript

I have this weird problem that if I upload an image from mobile to my website, the image will appear rotated on Chrome and Firefox desktop
It will appear in the right directions on the mobile browsers (Chrome mobile and Safari Mobile)
Seems like there was a CSS field (now deprecated) image-orientation: from-image. But seems not to work anymore
Other people suggest removing the EXIF info from the file, but that did not work either.
Did someone encounter the same problem?

The problem is in the EXIF data that iOS embed in the media.
If you process the media with Sharp, it will automatically process it and scrape it off.
Hope it helps anyone coming across this answer!

Related

Images inside posts re-sized gradually to be in zeros width and height in android browser

I've got many reports from Android visitors to my blog said that when they are browsing any post from my blog, the images inside the posts get re-sized gradually to be hidden completely (width and height like be zeros, just the shadow of the image is visible).
I've tested that and I confirm the issue in android browser and Facebook browser as well, but Google Chrome shows everything OK.
I don't know what is causing this problem, JavaScript or CSS problem? I'm using a bootstrap css code for images for responsiveness on mobile devices.
Seems this line did the problem:
img {box-sizing:border-box};
I removed it and it works in Android browser!

Why is website [entire body element] not displaying full width on iOS devices?

I have searched a lot of answers to similar questions, but nothing has fixed my issue.
Here is the site: dev.thekarmagames.com
The width and responsiveness work fine when simulating phone and iPad screens on computer, but something goes wrong when displaying directly in mobile Safari and Chrome on iOS devices.
Here is what it looks like on iOS:
I've tried manipulating CSS, editing/removing JavaScript, and experimenting with viewport settings. Nothing seems to work.
I could really need a lead that will set me in the right direction, and I'll happily share the solution with everyone once I find it.

Video Background in Mobile Browsers

I'm trying to make new web-site that background has a video.
I found a JS library: tubular
This plugin working as expected in my desktop browser. (Checked on : Chrome,Safari,Firefox)
But, This NOT working in mobile browsers.
I tried in (Nexus 5, HTC M8).
Both devices are not responding for video background.
Anyone there who knows the solution for this issue or some alternative library that I can use?
I suspect this is a problem with the video background not autoplaying on a mobile browser. This is by design though, it is a mechanism that prevents autoplaying videos from using up bandwidth unnecessarily.

How to make a website that uses fullpage.js go fullscreen on Safari for iOS

I'm working on a wordpress website that uses the fullpage.js plugin.
My main goal is to make it go fullscreen on iOS devices, latest versions are the main targets. By making it go fullscreen I mean getting rid of the ugly top and bottom bars, as you can see on this picture, in landscape mode those bars take up more than 25% of the space.
I've tried this, but of course all browsers are compatible except safari iOS.
I've also tried all tips I found on here like including the meta "apple-mobile-web-app-capable" but nothing seems to work.
On Apple devices in Safari, getting rid of the anchors option of fullPage.js will do the trick.
Not sure about other mobile phones or browsers, but it is well known browsers don't provide a way to deal with those bars and therefore there won't be much you can do about it.

Send HTML based on browser (iPhone or other)

I have an image carousel on a page on my site (using slidesjs and jQuery). It works fine on all desktop browsers, and even on the iPhone if the phone is on wireless. When the iPhone is connecting via 3G or GPRS, the image area of the carousel doesn't load and there's just blank white space.
However, I believe that the size of the images is stopping things from loading.
So what I'd like to do is detect whether or not the user is using mobile Safari, and if so, just show a single image in this space.
To do that means changing the HTML that is output for the carousel and just setting it to a single image source.
Is it possible to do this with javascript somehow ?
It is quite easy to do. Full explanation is here: http://www.quirksmode.org/js/detect.html.
Just look for "iPhone" in navigator.userAgent string.

Categories