Website JPGs appear very pixelated on an iPad - ipad

Our website appears fine on a Mac. However, on an iPad, the home page slider images appear very very pixelated.
I've had a look at [this article][2] and changed the JPGs to progressive, and cleared the server cache, and the iPad Safari cache, yet the issue remains.
Help appreciated.


From this answer, using background-attachment: fixed with background-size: cover causes issues on most mobile browsers. You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using #media screen and (max-device-width: 1024px){}
OR
You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO


Maybe try to convert the image to a PNG or SVG and see if this helps. If you have a graphic designer have him do this or use one of the image converters on the web. JPEGs are compressed each time they're saved and this is a lossy compression so the image will artifact giving the pixelated look you're describing. If this solves the problem then you know it was a problem with the image itself. If it still appears pixelated then this may be a problem with the Ipad instead. I would then see if you can get a developer to set up an emulator for a different Ipad device, with Genymotion or with the built in emulator that comes with Android Studio, and visit your site on the emulator and see if the problem still persists. Hopefully this helps!

Related

mobile version of jekyll site deploys with distorted images on ios

I finally have my site working the way I want it except for a bug that seems to only be with ios devices. I set the css on images on this particular page to be object-fit: contain. The picture should be displayed like this:
on Android and PC
But whenever I open the website on an iphone or an ipad I get this:
IOS
This is affecting the sites animations and really just looks very choppy because of it on iphones. I'm not sure how it could be working so well on android devices and just generally but still persist like this on IOS..I tried different browsers as well no use.
What's even more interesting is that on initial load you will see the incorrect css applied on the image, but after refreshing the page it loads the image with the correct dimensions. I'll appreciate any insight I can get regarding this issue.
Feel free to check out the repository: https://github.com/physicalrobot/vikalpaWebsite
And see the bug for yourself on an iphone or ipad at www.vikalpa.xyz/projects
I tried changing the css of the images to force them all to have a width: 100% and a height: auto.
I tried changing object-fit to anything else in the browser while using web-inspector on the ipad, but still couldn't get it to change.

CSS image mask broken in Cordova for iOS 11.x?

I use -webkit-mask-image in my meteor app, like this:
...
background-color: purple;
-webkit-mask-image: url('images/user_plum.png');
...
It works fine in all browsers. It works fine in the cordova version on Android. It was working fine in iOS Cordova. Now, only in iOS, all of my icons that use this technique are invisible, even though they are still clickable and functioning.
The problem was found on two users' iPhones and I reproduced it in iOS Simulator. My iPhone worked fine. Uninstall/reinstall of the app, rebuild/restart of the server, etc., nothing changed. Until I updated my phone to iOS 11.4, and now my phone has the issue, too. If I remove that -webkit-mask-image line from the CSS, I universally get the proper background-color'ed square where the icon should be. That and other simulator testing makes it clear the invisible icons are only happening on iOS devices and simulator, and only if -webkit-mask-image is in use. Is anyone aware of any changes in iOS between 11.1 and 11.4 that would break Cordova webview's handling of -webkit-mask-image?

Okay, this problem is very real, I've done a bunch of tests, installed different flavors of inappbrowser, etc., all to no avail. But here's a workaround (thanks to #JamesMontagne for the answer and jsfiddle at Is there any way to colorize a white PNG image with CSS only? that led me to try it out):
Just use -webkit-mask-box-image instead of -webkit-mask-image.
background-color: purple;
-webkit-mask-box-image: url('images/user_plum.png');
This continues to work on all the platforms it already worked on, but also works in this iOS 11.x Cordova environment in which it -webkit-mask-image had broken.
To be clear, -webkit-mask-box-image carries the "non-standard" warning in the mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image.
But it works when -webkit-mask-image doesn't, so I'm going with it for now.
Also, fyi, user_plum.png is a transparent png with a plum-colored icon image. It doesn't matter what the color of the non-transparent part is, there's no color math being done in this masking. The icon doesn't have to be white to work (many web pages of css masking topics include discussions of white or black masks).

I solved it in iOS coding both lines for everyicon:
-webkit-mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);
mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);
to the CSS icon... and for some strange reason got to be in THAT ORDER (webkit first, and mask second!)

Why are the background images not showing on iphones and ipads?

I have been trying to troubleshoot this page for what feels like eons. theafropick.co.uk is the site. Everything seems to work fine on all devices except on ipads and iphones the section with 6 tiles is completely gone.

It looks like it's just Safari that is having the issue. Here's a thread that shows other people having the issue:
Background image not showing in Safari
That thread has many different solutions, and I tried many within the inline safari dev tools without any luck. If they don't work for you either I would try using jpg instead of png.

CSS not being applied in iOS app

We are writing a Cordova/jQuery Mobile app, and coming across an issue with iOS (both 6 and 7). The problem is that CSS is sometimes in iOS is not being applied, even though it should be. The problem is both in the emulator and device itself.
For instance:
A background-color: red is displayed as white.
An element with overflow:scroll (both with and without -webkit-overflow-scrolling: touch) cannot be scrolled.
It's not an inheritance issue - the same CSS works fine in desktop FF, Chrome, Safari, IE and in Android. It also works fine using Safari remote inspection - the style won't be displayed initially, but simply un-checking and then re-checking the property in the Safari developer tools makes it work normally !
I have not be able to isolate what causes this problem, but when it happens it happens consistently. Is there a fix for this problem ?

It should work fine for iOS6. You can try using hexadecimal code for background color and add
-webkit-overflow-scrolling: touch; for smooth scrolling.
For iOS7 the bellow link may help you.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Svg rendering in WebView is pixelated on iPad3

I am using the Titanium SDK for developing a mobile application (for the iPad). On iPad1 and iPad2 everything is fine. But on the iPad3 my Svg graphics were drawn ugly. I am dealing with a lot of WebView's in different size's to show the Svg's. Some WebView's did the rendering as it should be, but in some WebView's the Svg looks like a scaled png or jpg. The Svg's were created on demand and were embedded into html. The Svg styling is done by CSS.
I've no idea why this happen...?
Help from you would be awesome!
THX Tass
Link to a screenshot
enter link description here

Resources