Could you explain the behavior of UIWebView -loadHTMLString:baseURL:?
For example I've got a simple html, which i want to render:
<html>
<body>
Test message <br>
<img src="%http_path_for_unreachable_resource%" />
</body>
</html>
In previous versions of SDK (equal or less then 6.x) UIWebView renders this html and shows 'Test message' without waiting for complete loading of all resources in html.
In 7.0 beta SDK behavior has been changed. Now where is no way to show any content in UIWebView without full loading of all resources. So I see a blank white screen without 'Test message'. Some time later then request for unreachable resource fails with timeout, UIWebview show its content.
I have already tried to force show content by using javascript in -stringByEvaluatingJavascriptFromString, by calling -setNeedsDisplay for all subviews of UIWebView.
Is possible to get an old rendering behavior of UIWebView?
Related
I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.
All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.
Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.
I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.
After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally.
Solution: Load chrome://flags and set Smooth Scrolling to disable.
Seems odd that this would be necessary. Anyone know what's going on?
This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).
6 hours gone, but it's a relieve to know it's nothing got to do with my codes.
iPhone with chrome is fine on my end
To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.
So if we apply this to the body,
body {
overflow: hidden !important;
}
this should work in your scenario!
Please make sure you have added this meta tag and the same attributes
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.
I'm here looking for a workaround for a weird Edge issue.
Edge browser doesn't seem to respect autofocus any time input focus is on the browser chrome. Minimal repro: copy the below HTML into an index.html file, open index.html in Edge, click on Refresh button in Edge browser bar.
Expected: input has focus and I can start typing immediately.
Actual: focus remains on the Refresh button. If I type ENTER it refreshes the page again. I have to manually tab across the Edge chrome to get to my browser page.
Note: Edge works fine when I refresh via Control-F5. Only the Refresh button has this problem.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Focus tester</title>
</head>
<body class="bg-light">
<form>
<input autofocus id="dataEntry" placeholder="Enter some data"></input>
</form>
</body>
</html>
Is this a known issue, and is there a workaround? My real scenario involves barcode scanners which programmatically send ENTER keys after reading data, and I want to avoid having the web page reload when someone scans immediately after loading or refreshing the page.
Thanks,
Max
This seems to be a bug, you should report it.
This bug report seems to encounter the same issue you are experiencing, but the status on this is 'fixed'.
Using the above test case, I tested in Edge 15,16 and 17 and all three experienced your bug (reloading via the UI refresh button, focus remains within the UI, however via the keyboard it works as expected).
I can't see any settings within Edge where the user can change this behaviour.
I'm developing an ionic app in iOS, I placed the pdf inside an iframe just by simply doing the following:
<iframe src="https://docs.google.com/gview?embedded=true&url=http://example.com/resources/myfile.pdf" mozallowfullscreen marginwidth="2" marginheight="2" width="90%" scrolling="auto"></iframe>
I didn't used cordovaInAppBrowser because I ran a lot of problem like after clicking the button the InAppBrowser doesn't open unless I don't minimize the app. So I just used iframe as the workaround. But the problem now is that, after the pdf being loaded, and the user clicks on the full screen of pdf, there's no back button. Is there a way I can remove the full screen button from the pdf or add a back button on full screen mode of pdf? I tried removing the mozallowfullscreen but doesn't work since it's for the iframe not for the pdf.
P.S.
I tried accessing the div inside the iframe that holds the button for full screen, but no good, it doesn't get the div, it's probably because I'm violating the Same Origin Policy.
Here's the code on how I tried to access the div:
$('#myframe').each(function(){
console.log($("div[role='toolbar']"));
});
I have built the following as test scenario: http://dev.driz.co.uk/Spinner/ for a webapp that will run on an iPhone Chromeless. If you open it up on your iPhone and add it to your homescreen you will see it as a full-screen web app complete with startup screen and preloader.
I have made the startup screen and first screen that the user will see the same as per the Apple documentation quoting: "Generally, design a launch image that is identical to the first screen of the app. Avoid including elements that might look different when the app finishes launching, so that users don’t experience a flash between the launch image and the first app screen."
As stated above, I have made them the same to prevent the flash that can happen between the startup and the app itself (usually due to different UI components, of which my don't change on startup). However I still get this flash! It's as though the app is showing the startup and then hiding and then showing the website which includes the showing the splash screen with the startup image again.
Any ideas on how I can combat this? I have even tried setting the html/body itself to have the background image of the startup screen but their is still a flash as it loads in. Also tried using an actual image instead of background, but again same issue.
Ok. Quick answer: Don't use the ios startup image imo, because it just shows very unrealiable and outside of ios you can't use it anyway. I don't know how long I tried to get a decent image to show and once you are talking different devices and formats it's just nasty with all the images you have to provide.
I have done a css/javascript splash screen, which I'm using for my own application (for example here). You can specify a portrait and landscape image (in 4 sizes) which get loaded depending on device.
The background is attached to the splash class, which I'm setting on the body and removing once the app has loaded.
I have put the code inside a repo on Github. Feel free to use. If you have any questions, let me know.
I am betting that the flash you are seeing is the background of the window, or your webview. It is most likely white, and when the app loads, it doesn't render the page immediately, so for a split second you see the white background of the window.
I would try editing the _window.backgroundColor (i'm guessing that property name) on your app delegate or in Interface Builder, and if that doesn't fix it see if you can edit the webview's background color. All may be dependent on whatever toolchain you are using to create the webapp (i.e. phonegap)
I do know that putting a loading image is true for the native app, but no where on the document you linked says it is true for web app as well.
Did you find a solution? I've found the problem is fundamental to the iPhone, regardless of your app.
Take this for example: it shows a website with a background of #ccc with a splash screen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the flicker. And if the splash screen is dark, it looks worse again.
I have faced a pretty strange issue. I'm trying to display pdf files using iframe. Little documents, consisting of 1-2 pages, are displayed correctly. But when it comes to documents consisting of for example 5 "heavy" pages, the iframe doesn't display the whole document - the document is cropped and as a result about 2-3 pages are displayed only.
Below is my code. As you can see it's pretty straightforward.
<html>
<head>
<title>Testing iFrames on iPad</title>
</head>
<body>
<iframe id="iframe" name="iframe" height="100%" width="100%" scrolling="no" src="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf" />
</body>
Can anyone help me to find out what is the reason for such strange behavior?
From what I understand iframe's height is what's responsible for the page cutting off, as you're actually scrolling the frame, and not the pdf inside the frame (i.e. setting height to "400%" will potentially give you the space you need, but it's sloppy).
This solution uses JavaScript to scroll the pdf contents itself, and may help:
how to properly display an iFrame in mobile safari