Display web content in windows and implement browser features using WebKit.

WebKit Documentation

Posts under WebKit tag

274 Posts
Sort by:
Post not yet marked as solved
2 Replies
2.9k Views
Hello everyone,For my first post, i would like to know if it is possible to pass a specific parameter from a link in an html page to the appstore and retrieve it directly in the app? From my search it's quite complicate and there isn't any easy way to do it. Am I right or it is possible?
Posted
by
Post not yet marked as solved
1 Replies
1.5k Views
On a Mac, Safari shows the wrong font for text drawn in an html canvas element when the font is embedded using @font-fase and a base64 data URI. The embedded font shows up fine in the body of the html (i.e. not in a canvas). Using the embedded font in a canvas element works fine with Chrome and Firefox.On an iOS device, the embedded (base64 data URI) font shows up fine in the html body, but not in a canvas element on all three browsers - Safari, Chrome and Firefox. Is there anything that I can do to fix this? Thanks.
Posted
by
Post not yet marked as solved
3 Replies
4.2k Views
I've met this problem when scrolling on my iPhone 6 device (iOS version 11.2.6). I've tested it on Safari and Chrome.Given a scrollable div, if i touch it when already on momentum scrolling motion, the scrolling stops as expected but the touchstart event is not triggered. If i touch (scrolling stops) and slide the finger, touchmove events does not trigger also.I need to touch (scrolling stops), raise the finger and then touch again to "reactivate" the touchstart/touchmove events.When tested on Xiaomi Android device (on Chrome), if i touch (scrolling stops) and slide the finger then touchstart/touchmove events are triggered.Is this issue a standard behaviour on iPhone?.I have set up a fiddle to test this behaviour:https://fiddle.jshell.net/galoxia/L63wj9or/Just flick to "activate" momentum scrolling on the blue box and then touch again to stop it. On Android you will see touchstart in the yellow box. On iPhone you will not.
Posted
by
Post not yet marked as solved
26 Replies
28k Views
Every now and then I need to make a website. And I noted in my last project that background-attachment:fixed; is still not supported by iOS. It is by Safari on MacBooks, so I'm wondering what the story behind it is? Surely it is not a matter of computational cost due to the so-called repainting of the browser's canvas? Because doesn't playing video cost a multitude of that?
Posted
by
Post not yet marked as solved
4 Replies
2.2k Views
I'm trying to test payments with different card types on the website.I've added test cards fromhttps://developer.apple.com/support/apple-pay-sandbox/to my tester account.In my payment request I added supportedNetworks:supportedNetworks: ["amex", "masterCard", "visa", "discover"],Payments work fine with amex, mastercard and discover, but Visa cards are not selectable, with the reason "Not accepted by this website".Are there some other requirements to use visa cards on the website?
Posted
by
Post not yet marked as solved
13 Replies
12k Views
Hi,We have a need in our Swift app for using a HTTP proxy with WKWebView. We want to route all HTTP(S) traffic through a proxy running Privoxy, which strips the http(s) traffic of tracking scripts and ads (for HTTPS traffic we obviously cannot see the content and strip the ads, but we can still block the requests going to hostnames that are known for serving ads). That is basically our product to our costumers. Anonymous (through proxy), ad and tracking free browsing, where no one is monitoring what you are buying or browsing with the purpose of profiling you and selling the information about you to others.With the now deprecated UIWebview, we were able to setup a HTTP proxy through the NSUrlProtocol, but since its deprecated now, continouing using it seems like a risky idea in anything but the short term.We have not found any way, by which we can setup a HTTP proxy in the WKWebView, since it seems to be doing the networking out-of-process of the app... Sources like this post on this forum seems to back this up: https://forums.developer.apple.com/thread/74572.However, Ssome sources seems to indicate that WkWebView was made more user-friendly with IOS 11 and IOS 12 - which is after the above post, so maybe it is possible now. As said, we have tried without luck recently, but maybe we are missing something?We hope someone can help or otherwise just give us some clarity, as the core part of our product depends on this feature, so any help and/or clarity is appreciated.NB:We have considered other options such as using a VPN to send all our data through our own servers. This requires that we change our full infrastructure setup though. And it seems that there is no split-tunneling options in IOS (on non-managed IOS), so if we use the VPN approach, our VPN connection (meant just for some casual browser surfing) will become a general VPN connection on the device. That means we would have to carry the full load of the users' network usage suddenly, which would likely force us to triple our monthly subscription fee to be rentable...Hope to get an answer, and sorry for the slightly long post! (Hopefully it showed we have done our homework and are not asking you to do it for us atleast!).Best,Jonas
Posted
by
Post not yet marked as solved
2 Replies
2k Views
i have the demand to use JSContext run the JavaScript with WebAssembly, but JSContext not support.i test this on the iOS12.4, iPhone6slet script = """ (()=>{ function testSafariWebAssemblyBug() { var bin = new Uint8Array([0,97,115,109,1,0,0,0,1,6,1,96,1,127,1,127,3,2,1,0,5,3,1,0,1,7,8,1,4,116,101,115,116,0,0,10,16,1,14,0,32,0,65,1,54,2,0,32,0,40,2,0,11]); var mod = new WebAssembly.Module(bin); var inst = new WebAssembly.Instance(mod, {}); // test storing to and loading from a non-zero location via a parameter. // Safari on iOS 11.2.5 returns 0 unexpectedly at non-zero locations // console.log(inst.exports.test(4)); return (inst.exports.test(4) !== 0); } if (testSafariWebAssemblyBug()) { // ok, we stored a value. return 'ok'; } else { return 'fail'; } })(); """ var context = JSContext( context?.exceptionHandler = { [weak self] _, error in if let error = error { let message = String(describing: error) print(message) } } let value = context?.evaluateScript(script) if let value = value { let message = String(describing: value) print(message) }the console printOut of executable memory in function at index 0 (evaluating 'new WebAssembly.Instance(mod, {})')
Posted
by
Post not yet marked as solved
7 Replies
2.7k Views
The iOS Simulator is incredibly useful for debugging. However, once a PWA has been saved to Home screen it is no longer possible to inspect in via Safari Web Inspector. Will this be addressed?
Posted
by
Post not yet marked as solved
21 Replies
8.2k Views
When I login to an account on a subdomain of a main domain, I want to be able to store a separate password for the same login id on the main domain account. This doesn't seem possible in the current Safari implementation.eg: domain.com is the main domain and is the general information site.my.domain.com is the subdomain that hosts the customer support.I want different passwords on each for the same login ID... Can't I do this?--marcel
Posted
by
Post not yet marked as solved
6 Replies
10k Views
I've observed some strange behavior that started around iOS 12.2 and continues through iOS 13.x. If you load even a very simple web page into Safari that contains a div with a 100% height, then the result is correct and you get a full-screen div. If you rotate the device to landscape then it resizes and the div still fills the screen. But when you rotate it back to portrait, an empty white area appears at the bottom of the screen, and there doesn't appear to be a way to make it go away.I suspect this has to do with the change Apple made around the iOS 12.2 timeframe, where when a phone is rotated to portrait, the URL bar shrinks and the navigation bar is hidden. When this happens, the content area is in effect larger than it was before, but it's like CSS doesn't know about it, so a height of 100% represents the height as if the URL bar was larger and the nav bar was present.This HTML is enough to show the issue:<!DOCTYPE html> <html style="margin:0; padding:0; height:100%;"> <head> <title>Test Page!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="margin:0; padding:0; height:100%;"> <div id="Layout1" style="border-width:0px; height:100%; width:100%; background-color:red;">Rotate me</div> </body> </html>Viewing that page on an iPhone with iOS 12.2+ will look fine, so rotate to landscape and then rotate back to portrait. A white area will appear at the bottom. I'm told that on larger-style iPhones, this only occurs if it is the only tab open -- otherwise, iOS never hides the navigation bar. On my 6s, it happens every time.Has anybody seen this before? Any ideas for working around it? It is making all of our web apps "scrunch up" after users rotate their devices, with no obvious way to programmatically fix it!Thanks!
Posted
by
Post not yet marked as solved
2 Replies
2.2k Views
Dear All,I have written a PWA which installs an icon when it loads first.The functionalites include offline storage using indexed db and camera.usage to upload photo.In chrome running in android, everything works fine.However in safari in iOS camera does not open when I lunch the app from the icon loaded into launcher screen.Similarly, it does not throw any meaningful error message either ! we tried to use web inspector to inspect the error , but the page when launched from launcher icon does not show up in web inspector.everything works fine when lunched from browser (online mode) . Please help us resolve this. below is a piece of code which we are using for camera <button className="btn btn_gray my-2" onClick={this.takePhoto.bind(this)} > Take photo{" "} takePhoto() { const { capturedImages, cameraHide, showaddimagesComponentScan } = this.props; let selectedPartNumber = this.props.selectedPartNumber; this.setState({ hidevedio: false }); const config = { sizeFactor: 1 }; let dataUri = this.cameraPhoto.getDataUri(config); this.setState({ dataUri }, () => { let _dataUri = this.state.dataUri; DB.InsertOrUpdate(DbConstant.tblImageTemp, { rowID: this.props.taskID, partNumber: this.props.partNumber, ImageURI: _dataUri }); }); // capturedImages.push({ partNumber: selectedPartNumber, imageURI: dataUri }); this.setState({ // capturedImages, cameraHide: false }); this.cameraPhoto .stopCamera() .then(() => { console.log("Camera stoped!"); }) .catch(error => { console.log("No camera to stop!:", error); }); }
Posted
by
Post not yet marked as solved
20 Replies
18k Views
webkitEnterFullScreen API is supported on iOS for video element, but not for a div element. Also as a fullscreen demo website shown, Safari on macOS supports div element but not on iOS. Is there any plan to add the support in iOS? If not is there any way to fullscreen a div element or make it run as fullscreen on Safari iOS?
Posted
by
Post not yet marked as solved
4 Replies
2.1k Views
What exactly is the memory budget of the WKWebView and is it possible to increase the amount of memory it can consume? I am finding that when I attempt to load a large WebGL scene into the WKWebView I am getting the webViewWebContentProcessDidTerminate callback and unable to load my scene. Is it possible to keep the WebContent process from quitting?
Posted
by
Post not yet marked as solved
7 Replies
7.7k Views
Hi, We've been using the WKWebView for authentication and authorization purposes inside our app. Unfortunately, we are not able to enable the password autofill/keychain integration with WKWebView. The website is working correctly (we can see the suggested passwords and the key for the password list)whenever we are opening it using Safari, but when we are trying to open it inside our app using the WKWebView there is only default toolbar ( with arrows and done button). Is there a possibility to enable autofill using some javascript scripts or WKWebViewConfiguration in WKWebView or is this behaviour is reserved only for SFSafariViewController and Safari?
Posted
by
Post not yet marked as solved
1 Replies
1.5k Views
We are creating a watch party app that allows you to video chat with your friends and play a YouTube video at the same time. The video is played using Google's youtube-ios-player-helperlibrary which uses a WKWebView with their iframe API, as that's the only way to play it without violating the Terms of Service. We need the ability to change the volume of the YouTube video separately from the video chat, so you can hear your friends over the video for example. Unfortunately it's not possible to directly change the volume because iOS does not support changing the volume via JavaScript - https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10, unlike macOS. Setting volume doesn't do anything and getting it always returns 1. Users can change the volume with the hardware buttons but this applies to all audio including the video chat, not just the YouTube video. Someone found a workaround - https://stackoverflow.com/a/37315071/1795356 to get the underlying AVPlayer and change its volume natively. This worked with UIWebView but does not work now that it uses WKWebView. What can be done to change the volume of the YouTube video?
Posted
by
Post not yet marked as solved
3 Replies
2.5k Views
I have been struggling to prevent WkWebView open Instagram app automatically when a user clicked a hyperlink on WKWebView. Currently, my app is able to open the new window/new tab request from my web app and load into a new ViewController which creating another WKWebView to handle the request. However, whenever I clicked the link which is opening the user's Instagram profile, iPhone will automatically open the installed Instagram app. I have tried a few approaches and it is still not working as expected. I have another social media app which is Facebook and it is working as expected because it doesn't open the installed Facebook app on my phone and able to load into the new ViewController. Scenario 1: Although able to open a new tab, but the entire webview has stopped working. Scenario 2: Unlimited loop due to will always trigger the decidePolicyFor function. Scenario 3: Delete installed Instagram app, It wouldn't open the app automatically and able to load into the local WkWebView but this is not the solution. Thank you in advance and sorry if I didn't provide a clear description. func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { 		if let host = navigationAction.request.url?.host { 			 if host == "www.instagram.com" { 							 								/* Scenario 2, unlimited loop */ 								if let url = navigationAction.request.url { 										let request = URLRequest(url: url) 										self.webView.load(request) 								} 								 								/* Scenario 1, prevent loading user's instagram profile in local wkwebview */ 								decisionHandler(.cancel) 								return 						} 				} 	 decisionHandler(.allow) }
Posted
by
Post not yet marked as solved
10 Replies
8k Views
We are having the below weird issue on 14.x devices Issue :    My application is a hybrid application. We have noticed an issue on 14.x related to loading the fonts mentioned in our CSS. The font file is not getting loaded occasionally. We couldn't infer much what is hindering the font loading on 14.x. In the previous version of iOS, this just works fine.   CSS:   @font-face{  font-family: "custom-font";src: url("fonts/custom-font.woff2")format("woff2"),  url("fonts/custom-font.woff")format("woff"),  url("fonts/custom-font.ttf")format("truetype") }     The above style sheet is linked to the page that we are loading.   Has anyone observed this issue on your project ? If so, please let us know the approach followed to resolve the same.     We also tried to follow the approach where the font file is loaded by native portion. The below approach works fine on iPhone Simulator but not on device, no clue why it's so   Added the font to the App and the file is targeted properly (Fonts provided by application key is updated). Ensure that the specific font is loaded and available using logs Used the font family in our CSS (we don't have to load the font on WkWebView space)
Posted
by