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.
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.
Since Apple is requiring a storyboard launch screen in a few months I went ahead and tried to add one. Adding one is simple and it works just fine but it screws up the layout after loading the app. No longer does a larger screen automatically adjust the resolution, instead I'm left with an SE layout on an 8 Plus screen placed in the top-left corner with the background image repeating (like wallpaper from a 90s website). I'm not using constraints, but I'm not even sure if that's the issue. If so I have a feeling I have a lot of work ahead of me (keep in mind I've never had a need for constraints). A side thought though is, from what I understand, Apple wants all apps to look correctly on all devices... makes perfect sense. But my apps have always appeared correctly no matter the device. So it's ironic that adding the launch screen is breaking my apps' appearances. Is it the constraints? Is there an alternative solution? Or is there hopefully something simple in the launch screen that needs to be changed? Thank you!
As of now my iPhone works on iPad as it should except my problem is that some images partially show as if they got zoomed in on. So I tried turning universal devices on but that's just as bad since everything shifts into different locations.
I am using Auto Layout and this is an old app I'm wanting to update.
Missing constraints was the cause of the problem!
It seems like that missing constraints is the cause of the problem! You might want to redo the layout and constraints.
I created an iOS app last year using html, css, js, jqtouch and phonegap. The app has worked well until recently. It appears that since the iOS 5 update, there is a problem with the navigation.
If you scroll down the apps "pages" and try to select any options below the original screen horizon, the navigation doesn't work. Scroll back all the way to the top of the page and the links above the screen horizon all work. If you scroll back up the page, but not all the way to the original starting position, even the links that are above the original screen horizon won't work.
I worked with Phonegap support and they suggested the problem was with jqtouch. I updated the jqtouch files in the project, and now when I try to run the app (from Xcode) in the iPhone simulator or on a test device, the navigation doesn't work at all. Before, the "links/buttons" would change color as they were supposed to but no work. Now, the "links/buttons" won't change color or navigate to the next div or page.
Could someone tell me what I may have missed in updating the jqtouch/jquery files that could cause this?
We had the same issue and e solve it updaing to the latest jquery and jqtouch version.
Hopefully this will help you.