With ios11, when a site is added to home screen which has the web-app enabled. The title bar overlaps the site content in certain cases.
To reproduce the issue -
Add any site which has web-app enabled to home screen
Open the added app from the home screen Change the orientation from portrait to landscape
Now from landscape to portrait again
Now you will notice that the title bar overlapping the site content.
I have raised an issue at bug reporter with apple but did not get any response
The meta tag for the title bar is default, which behaves properly until the above steps are done
This is happening with all the sites which have the ability to be added to the home screen and function as an app. Any suggested fixes? Thanks.
The issue is resolved in ios 11.3 beta version. Hopefully this stays when the actual release version is out.
Related
I noticed this with separate html code, but I can repeat the same issue using the following url example of an html web app view, such as would be used in a hybrid app. To make it easiest for someone reading this to reproduce the issue, I will include that url here (I don't need to use that url. I have my own code. But this url does the same thing, so is a good example for someone reading this to examine.)
https://framework7.io/examples/tab-bar
Image: These bottom nav bar items do not respond to touch on iPhone 6s or 6s Plus, but DO work on 5s and SE
To reproduce:
Create a simple iOS App with a wkwebview (you may already have one from a previous project)
Simply ensure the webview loads the above url, and you will be able to observe the issue.
If a wkwebview in a Swift app loads the above url in an iPhone 5s or lower within a full screen wkwebview, the bottom tab menu (with choices for information, inbox, upload, and photos) will work. But if opened in iPhone 6s or 6s Plus, the bottom tab menu will not work. You can tap on choices, and nothing will happen.
Important: This is not in Safari. This happens in the context the link being opened in a wkwebview within a Swift app. This is repeatable.
I have checked the layer debugger, and nothing is in the way of the bottom tab.
Thank you very much.
I was going to just delete this, but you never know. Someone else may have the same question later. Maybe this will help them.
So here is the answer which I have just figured out:
I hadn't added auto constraints to ensure the webview would stay the same size as the window. That is why it worked on the smaller phones like the 5s and SE (because the webview happened to aready be big enough.) Meanwhile, the bigger screens of the 6s and 6s Plus were beyond the size of the webview.
I saw it in storyboard and added constraints to ensure the webview would stretch to however big the screen was, and everything started working. The lower nav bar was no longer out of reach of my taps.
I do think it's odd that the content displayed on the entire screen, but only the area which detected touches did not extend to the screen, but that is an opportunity for me to examine the code and see how things are arranged.
The main issue has been solved.
i am using ons-navigator
When i test it on iphone it looks like
iphone
and when i test it on android devices it looks like
android
There is some padding added to the top of the page when running on iOS since the status bar is part of the app.
To disable this behavior you can run
ons.disableAutoStatusBarFill()
After loading Onsen UI. However, in most cases you want to have the padding in the status bar.
I've looked into stackoverflow and it seems that position:fixed in an iframe for iOS mobile devices has been an issue in the past but have yet to have an answer.
Here's an example I created via jsbin: http://jsbin.com/pekeca/1/
In that example, there is a parent HTML page that uses iframe which contains another HTML page (child). Here are the things to note:
When the parent HTML is viewed on any device, the navigation bar in the child HTML stays fixed. This is the intended behavior.
However, when the parent HTML is viewed on an iPhone regardless of the browser, the navigation bar in the child HTML loses its fixed position. This is a bug that only happens in iPhones.
When the child HTML page is viewed directly (i.e., not inside an iframe) in an iPhone, the navigation bar stays in a fixed position and works fine.
Has anyone figured out a workaround for position:fixed in iPhones or iOS devices?
In Chrome and Safari on iOS it seems the issue here is not the fixed position, but with the height of the iframe. From another SO answer: "Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown."
These other posts might help you:
iframe on iOS (iPad) content cropping issue - https://stackoverflow.com/a/10816492/1359306
iFrame and Mobile Safari (iPad/iPhone) - https://stackoverflow.com/a/19667786/1359306
I have created one MGWT application with the help of RPC,PHONEGAP&GWT technologies.My application is working properly until IOS 6 version ,In IOS 7 my home screen is shrinking when i am tapping one icon,in that opening one drop down list and directly get back into my home screen, at that time my home screen is not displayed properly. Please look into my issue .
Thanks in advance..
For Example: The Complete structure of my application. First Login screen .After login into my application home screen is coming ,in that settings,about..etc icons are there.In that i am selecting settings icon in that work type drop down list is there and i am tapping work type then tap the back button coming to home screen at that time my home screen is not displayed properly.
On iOS 7, the app height and width needs to be set to device height and width to view port to resolve the issue. Below is a sample code to be included in onModuleLoad to resolve the issue.
ViewPort viewPort = new MGWTSettings.ViewPort();
viewPort.setTargetDensity(DENSITY.MEDIUM);
viewPort.setUserScaleAble(false) .setMinimumScale(1.0).setMinimumScale(1.0).setMaximumScale(1.0);
viewPort.setHeightToDeviceHeight();
viewPort.setWidthToDeviceWidth();
I am building a website using the twitter bootstrap base so that i can have a site that works on the ipad and also touch phone devices.
So far my site looks great in all browsers, PC ipad and phone however ipad only works fine in portrait. When in portrait it has the lovely button in the corner which opens the expanding menu.
I want this to work on the landscape one too but can't seem to get it to work.
Could someone please advise me whereabouts in the CSS I need to look and also if possible what screen size I am looking for to make the collapse bar appear in landscape.
Answering my own question.
Just incase anyone else has the same problem:
iPad screen resolution is 1024 x 768 so in landscape mode it renders like a full web page.
There are ways to overcome this by detecting the device's browser user agent.
For more information see this:Checking iPad user agent