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.
Related
I have a game we're trying to release in the app store for iphone and ipad, and while it works fine on all of our devices (a handful of iphones and ipads), when the app store reviewers try it the actual viewport they see is highly cropped and distorted.
This is an example options screen that the reviewer saw:
This is what that options screen looks like for us on an equivalent aspect ratio/resolution:
As you can see, it's just a small, off-centered square for them, surrounded by black. But we've tested this on devices like an old iphone 5 up to big ipads and have never seen anything like this, the game takes up the full screen and the aspect ratio is correct and not distorted or stretched.
One important detail is this is entirely an OpenGL and SDL program, not using any Apple UI frameworks at all. The render size is determined by SDL_GetRendererOutputSize(), which then is used in glViewport(), and the window is created with the SDL_WINDOW_ALLOW_HIGHDPI flag. This so far has seemed to work with both retina and non-retina physical devices.
Also all of the screenshots they've given us look the same, same little square viewport surrounded by black, so I originally thought they were cropping them on purpose to highlight specific components of the screen, but this appears to be just exactly how it looks for them as this square is in the same position in each screenshot. I've asked them for more information on their devices but they wouldn't tell me.
We also have the program set to only ever use landscape, not portrait, but the weird thing is that with the way our UI reflows, the only way to get that button to look squished the way it does there is if the game was somehow still rendering in portrait, as seen this example shot I took by forcing it to run in a very tall portrait window:
I don't even know where to begin to try to figure out what's going wrong for them though, because as I've said, everything looks fine when running in an emulator and everything looks fine when we've run it on several physical devices. Is there some build or release configuration I could be missing? Some OpenGL setting I should check? I'm just hoping this problem looks similar to something someone else has encountered before.
If you are on an equivalent device, then another thing that may differ is the accessibility settings. Search for display zoom in settings. Also, try locking the iPad into portrait mode before launching your app to try and reproduce.
Note the little double arrow icon in the lower right corner of the reviewer’s screenshot. I don’t know what that is, but it looks like it could be some kind of screen zoom or accessibility mode. Perhaps they can answer what it does, and how to enable it for yourself.
To follow up with the solution that worked for me, I noticed that in my project's General settings in Xcode, under Deployment Info, I had only checked iPhone and not iPad. What I've since learned is that without that checkbox, some iPads will have to run in an emulation mode, which may have been the source of our problem. Deploying a new build with that checked (as well as "requires full screen"), it rendered exactly the same on our own iPads, but the app was subsequently approved with no further problems. I had made no other changes to the program, so my assumption is that that setting likely fixed it.
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!
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.
I dont quite remember what change I made but the whole UI seemed to be magnified for my ios app including font sizes , image sizes. Strange thing is the time , battery power ad network connection symbols which are usually shown on top have also magnified. I cant seem to figure out why . Can someone please advise ?
I have already tried playing with size classes ( with / without for each VC ) and it dint work
It may be running in the 4" compatibility mode, which was to allow older apps to run on the newer 6 and 6+ phones full screen. you might need to change your splash screen of you app to have all the sizes to fix this, if you dont have it already
I was required to display my website in a full page iframe, which was already a pain in the ass (I'm ranting sorry).
In the I have a select input and it seems that after I make a selection the screen freezes when the screen is vertical but if I put it in landscape mode it works like a charm.
Also the same thing happens when I go from landscape to vertical mode and again all comes back to normal back in landscape mode.
I though it could be due to some of my scripts but I remove everything and I still got the issue.
And I forgot to mention it, but there was no issue at all before installing ios 7.
I'm at it for a while so any suggestion would be really appreciated.
I tried reducing the code to the minimum cleaning out the unecessary stuff and putting everything together in a single file instead of using partial pages. Since then it seems to work so I'm gonna leave like that it's been long enough.
Still not sure what was the issue even though it worked on IOS 6 and without the iframe or in landscape mode on IOS 7. Anyway I'm done with it