Iframe automatically goes full screen using Ionic 3.9.2 on iOS.
I've tried removing all the fullscreen tags. I notice that it is not happening anywhere else. Only happens on iOS. On other devices, I have to manually make it full screen.
Why does Iframe automatically go full screen on iOS?
<iframe src="https://d1mlukbqb3dh9w.cloudfront.net/PortraitCourse/Module01/Module01Section1/story.html" height="655" width="100%"></iframe>
A while ago I would have been able to provide you with a spot-on answer. Unfortunately I no longer have access to the resources I would need to do so... meaning my answer won't be a complete solution.
IFRAME, on iOS, works slightly differently than on Android. Getting an IFRAME to take only the height you want is not simply a matter of setting the HEIGHT property on the tag as the rendering engine works differently. You'll have to play around with CSS both in the container of the tag and in the contents of the body itself.
Try proceeding as follows:
prepare a mock target page that doesn't take all the height, make
its background red and see how much space it takes
make the mock page longer than the height of the screen by adding lots of text and images to it and observe the change
wrap the IFRAME in a DIV and set the style=height: xxx of the div, as well as its overflow.
wrap the contents of the mock page in a div, setting its height, overflow, position and display style
properties to control its appearance.
repeat step (4) with both the HTML and BODY tags of the mock page.
Playing with these in real-time using Safari to alter their values will prove most useful. It was to me at least, when I had the problem over an year ago.
Related
I am currently developing a hybrid app in iOS that loads a website and has some other features (contacts, sharing, notifications...) using cordova plugins. I do have access to the content of the site that is being displayed by the iframe.
The normal way this is done is to load the website in an iframe. I have already done this in android and it works very well. In iOS however:
Safari messes up the size of the frame. I fixed this by setting the min-width css style to 100% for the frame.
Scrolling on the iframe is always set to "no" even if you specify "yes. I "fixed" this (so I thought) by using the only solution I could find which is to wrap the iframe in a div and scroll the div. This made the header (position:fixed) scroll with the page when it should be fixed to the top of the page and broke other things on the page that rely on scroll position to trigger an action. I also tried modifying the body of the content to contain css styles mentioned here but this didn't work either. I was back to square one.
I have spent a total of a week researching how to fix this with no avail. Recently I have discovered that loading my website in iOS's UIWebView or WKWebView works well to display the site exactly how I would expect.
That brings me to two possible solutions (and my question):
Maybe I missed something with the css style on the content of the site. I read that it is possible to get scrolling to work this way but I am sceptical because safari does not allow scrolling on an iframe.
(The likely solution but the one I cannot figure out) Make my cordova app use a one of iOS's webviews. This is what I am having problems with. I cannot figure out how to do this. Is a webview an iframe? How do I use one of these webviews in my app? What does the index.html (cordova specific file) look like when I use a webview instead of an iframe (because currently this is where my iframe is).
I solved this. Since I have access to the contents of the page, I added:
position:absolute
top: 0
right:0
bottom:0
left: 0
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
To the scrolling body of the page. This fixed my problem
Problem
We have an Ionic2 project. Ionic (on iOS) creates a Safari browser. Safari allows for what I call "overscroll". This is when you can scroll beyond the top or bottom of the page and the page snaps back.
One of our pages has a small signature pad. If a user tries to sign with their finger, they instead scroll the screen. The page content is small enough that it shouldn't be scrollable, but the overscroll causes the page to move.
Desired
We just want to disable the blasted overscroll.
Really all of our Ionic projects suffer from this drawback in some form or another, but this is the first project where it blatantly breaks functionality. In other cases it's just an annoyance.
Appeal
Is anyone familiar with how to disable this overscroll? Whether through ionic, a cordova plugin, or the HTML itself.
If I have understood you correctly then this is actually really easy to do.
Just add no-bounce to your <ion-content> element.
e.g.
<ion-content no-bounce>
I am using VideoJS to show a video. It works great in all browsers on each and every system. Exception is the iPad (iOS 5 and iOS 6, both tested on Safari and Chrome). The video resizes to about 300px width.
When i delete videoJS from the page, the video is shown correctly. But i need videoJS for skinning purposes and because it makes HTML5 video work in jQuery sliders.
I tried several things:
Manually entering width and height in video.js or JS.
Adding CSS (including !important) to the videotag and even all tags (param) below.
Tried some vague techniques i found on stackoverflow. Like -webkit-transform-style: preserve-3d; in the video-tag.
Tried to play with wmode.
Nothing seems to work. Does anyone have an idea?
First, if you haven't yet, you may want to upgrade to v4.0, released at the beginning of May (2013).
With 4.0, you can see a few examples of setting the width height, that are at least working for me on my iPad:
Width/Height 100%: http://jsbin.com/uyelud/1/edit
Width 200px/900px (weird dimension for example) http://jsbin.com/ojajuc/2/edit
To walk you through the vjs code...
The width height settings are grabbed from the tag here:
https://github.com/videojs/video.js/blob/v4.0.3/src/js/player.js#L112
Removed from the video tag (because it's wrapped by a container div and made to fill the container)
https://github.com/videojs/video.js/blob/v4.0.3/src/js/player.js#L144
Applied to the container div
https://github.com/videojs/video.js/blob/v4.0.3/src/js/player.js#L180
And then handled by the UI component code
https://github.com/videojs/video.js/blob/v4.0.3/src/js/component.js#L647
If you have different results on your page, you may want to set up a reduced test case to help narrow it down.
I've observed this on iOS 4.3 to 5.0. When you create a even a simple offline web app, meaning one HTML file + few assets such as CSS and JS (all present in the cache manifest), it works offline (I tested in Airplane Mode) – BUT, when you add such an app to your home screen and open it in fullscreen mode, it first displays initial content, then everything disappears (page becomes white) for half a second or more, then content reappears again.
You can see this by adding Glyphboard, a well-known and useful offline web app, to your iOS home screen and launching it a few times. You should see the white flash effect every time you load it.
This is a big problem because it gives away the non-nativeness of an app and gives the impression that the app is non-optimized for performance and buggy.
I've tried finding reports about this but all I can find is rumors and misconceptions about the iOS 4.3 JavaScript rendering engine fiasco, which doesn't need at all be related to this issue. But in iOS version 3 I distincly remember not ever seeing the white flash.
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available. This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
Has your HTML/CSS changed between testing IOS versions?
I've found this to be caused by the use of:
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
With a minimal page, I get a white flash between the apple-touch-startup-image and the page contents if I use the viewport meta tag. If I take out the tag, no flash.
It's possible to work around the problem by setting the tag programatically.
I think what happens here is that iOS takes a screenshot from the page when it is added to the main menu. Then this screenshot is displayed during the application loads (WebKit loads). WebKit starts rendering the page and the page itself is constructed in such a way that the page content is not instantly available, leading to a white flash which is a rendered page when page content is not yet there,
You can avoid the problem to a certain level by building your JS/CSS so that it loads the initial HTML view fast and then lazily loads / builds the rest of the resources on the background. Also you can set a custom loading screen instead of the default screenshot iOS uses from the page.
Maybe if you can take yourself a screenshot of your app and then have something like this:
<body style="background: white url('my-initial-loading-screen.png')" />
... and make sure image is available and comes from manifest.
Or even better, have loading screen which does not require any external resources to show (just plain HTML) so you know the browser doesn't need to load anything.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps