Edited:[All the following happens even on stock IOS browser]
I have a UiWebView which load a local HTML page.
The content of the page is managed dinamically by JS, so it may grow or shrink vertically.
The layout is:
<div id="myContainer">
Some text here
</div>
The text-content may grow up to require vertical scroll, and everything is working fine.
Whenever i load new content, I use:
container.innerHTML = '';
container.appendChild(newContent);
Again, everything is fine.
The problem came when i scroll the page vertically: if I load a big content, the scroll is managed correctly, but then I load a small content and the page keeps the same big size set by the big content, with a lot of unused blank space at the end.
If i don't ever try to scroll the page vertically, the problem don't shows up (eg. i load the big content, I don't scroll, then I load the small content => the scroll is fine and page is shrinked to the latter). That's quite weird, I think something may be broken in the ScrollView logic or in the Webkit engine.
I already tried by using timeouts between innerHTML = '' and appendChild.
No luck here.
I'm experiencing this problem just on IOS stock browser & UiWebView, not on any desktop browser nor Android mobile browser / WebView.
Could anyone help?
Thanks
Edit:
Reloading the UiWebView by browsing a blank URL or anything else is not an applicable way in this case: my app is fully JS and I definitely cannot restart the app each time.
Finally, i came across a fix for this, I post here so that it may help someone other. The problem was about the containing div that won't shrink. I just set height of the container to zero while changing its content, and it return to correct size:
container.innerHTML = '';
container.style.height = '0px';
container.appendChild(newContent);
Related
I'm attempting to embed a WebView into a BorderPane as it's middle component. My app starts initially in an unmaximized mode. If I maximize the application, the webview will resize accordingly, but the html & css content will not fill the whole area (it is centered in the WebView). How would I go on fixing this? I've tried to call impl_reapplyCss() and friends, but nothing seems to help.
My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method
UIWebView successfully loaded content, but is not displaying it. UIWebView is just white screen. BUT, if you click on this UIWebView it will process your click. For example, if you click at place where the link should be (but in fact the white space), the click processed and next page loaded and displayed OK.
The bug is unstable. I got it only with local HTML file (our homepage, it generated locally), web content loads OK. It happens in 20% cases. But in the same time, it is very sticky. Once got white screen, you can reload this page many times and see white screen (but if you click on invisible link, another page displayed successfully). Sometimes it occasionally appears without any reason. Your can "scroll" this blank screen up and down and it occasionally loaded. This local HTML has a lot of stuff, embedded images, javascripts, etc, and it could be javascript problem, but I can't explain how it can be, that content invisible, but still clickable.
It happens in iPod real device and iPhone simulator 4.3, but can't reproduce it on iPad or iPad simulator.
I spent a whole day trying resolve this. Any ideas?
I solved this!
This really weird behaviour of UIWebView was caused by javascript code. The javascript was like (simplified):
<script>
function onLoad() {
location.href='xxx://pageLoaded';
}
</script>
<body onload='onLoad();'>
The idea of this code was to inform app about the fact that page was loaded. In the app I catch request to xxx://pageLoaded and cancel it (in shouldStartLoadWithRequest). Because request cancellation, I didn't expect any problems here. Espesially, I didn't expect that content will become invisible, but still clicable. I added timer (setTimeout) between onload fires and location.href change. It solves the problem.
NOTE: I know about webViewDidFinishLoad event in UIWebView. This is very simplified example just to explain the problem and the solution. Real javascript is more sophisticated and what it is doing can't be reached by simple use webViewDidFinishLoad.
I am developing a Phonegap app for the major os platforms and am currently testing it on an iPad with iOS 5. Im using jquery mobile. So for large screens i've used the splitview jquery mobile plugin. http://asyraf9.github.com/jquery-mobile/
I've put a
$scrollArea.css('overflow-y','auto');
$scrollArea.css('-webkit-overflow-scrolling','touch');
to make the page scroll instead of using iscroll like the plugin was using. Now whats happening, is that the page isn't loading/repainting as the user scrolls. I have a list of 100 items and i scroll through them. The scrolling itself isn't slow, but it takes almost a full second for the new list view rows to pop into view after it has been scrolled. Before that it's a blank area.
On observing, i can see that the the list items don't pop into view until the scrolling has come to a halt. (momentum scroll)
A similar issue is here http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div
What can i do to make this work normally?? The same thing works fine on android tabs. pls help.
EDIT: If i use only
$scrollArea.css('overflow-y','auto');
then i dont face this issue of momentary blank areas after scrolling, but then the scrolling is painfully slow.
Please don't suggest using iScroll. Already tried that. its much much slower that what i get with -webkit-overflow-scrolling, and i cant use it.
My Approach
So, I tried a lot and I read even more about this problem. I ended up with a solution which is "OK" to me (because it works), but which is definitely not near to "perfect".
When using this CSS:
.container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
you run into a lot of problems when having a complex design (in my case a fullscreen background image), and it gets even worse, when using absolute positioned elements and iframes. (Which is - of course - both the case I needed).
So, what did the trick? Basicly this CSS:
.container > * {
-webkit-transform: translate3d(0,0,0);
}
With this rule the content was almost all the time rendered right away without getting those blank areas. Only when scrolling down the first time very fast it's a little flickering.
But be careful with the rule -webkit-transform: translate3d(0,0,0);. Using this rule heavily on many child elements forced Safari to: sometimes slow down but almost all the time to crash. The best thing is to wrap all content elements into a single div, works fine.
Done? Not really. There is still the iframe-issue: ("argh")
iframe
When the iframe is not fully in the visible part of the container at the start it gets cropped or is not even displayed at all. This could sometimes also occur when scrolling around. So, I tried to force Safari to re-render this part anytime scrolling is completed and came up with this:
//using jQuery
var container = $('#container');
var iframe = $('#iframe');
container.scroll( function (event) {
iframe.css( 'marginLeft', 1 );
setTimeout( function() {
iframe.css ( 'marginLeft', 0 );
}, 1 );
});
The thing with the scroll event on a touch device is, that it's only triggered when the scrolling has come to an end, so this function is not fired at anytime but when the momentum has come to an end. The short movement is actually not visible.
So, maybe this is helpful for somebody.
Further information
Here a few more links on this issue:
On how the scroll event is fired in iOS:
javascript scroll event for iPhone/iPad?
Bug report of this problem to Apple:
https://stackoverflow.com/a/7893031/1456376
iframe example with the same problem:
https://stackoverflow.com/a/8275972/1456376
We have used the plugin below in our project, did you try this one out?
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
On iOS it uses hardware acceleration to render the scrolling. It is rather easy to use, all you have to do is to assign an additional class to your div.
We did have some issues on Android 2 with this plugin, to overcome those issues we changed the scrollMethod property in jquery.mobile.scrollview.js.
I hope it helps you solve your scrolling problem
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