Post not yet marked as solved
Hi!I currently developing a mobile website and found that Safari on iOS has some problems setting the focus on inputs when they are inside an iframe.When in a page you have many inputs you can tap on a field and then use the next / previous buttons on the keyboard to navigate between the fields. When the focus move to another input Safari scroll automatically the page centering the field in the page. This is great and works well.The problem is when the fields are inside a page of an iframe. In this case when you change focus from one field to another Safari has some kind of issue; the page “bounce” and the focused field is not centered in the page.I have made a video of a simple page that has this issue. In the first part of the video the page without the iframe is loaded and the focus works correctly. In the second part the page with the iframe is loaded and the issue is visible.http://www.dale1.ch/documents/safari_iframe_focus_issue.movThe code of the first page (testinput.html) where the focus is correctly handled is this:<!DOCTYPE html>
<html>
<head>
<title>Test input</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<div><span>Input 1: </span><input type="text" tabindex="1" /></div>
<div><span>Input 2: </span><input type="text" tabindex="2" /></div>
<div><span>Input 3: </span><input type="text" tabindex="3" /></div>
<div><span>Input 4: </span><input type="text" tabindex="4" /></div>
<div><span>Input 5: </span><input type="text" tabindex="5" /></div>
<div><span>Input 6: </span><input type="text" tabindex="6" /></div>
<div><span>Input 7: </span><input type="text" tabindex="7" /></div>
<div><span>Input 8: </span><input type="text" tabindex="8" /></div>
<div><span>Input 9: </span><input type="text" tabindex="9" /></div>
<div><span>Input 10: </span><input type="text" tabindex="10" /></div>
<div><span>Input 11: </span><input type="text" tabindex="11" /></div>
<div><span>Input 12: </span><input type="text" tabindex="12" /></div>
<div><span>Input 13: </span><input type="text" tabindex="13" /></div>
<div><span>Input 14: </span><input type="text" tabindex="14" /></div>
<div><span>Input 15: </span><input type="text" tabindex="15" /></div>
<div><span>Input 16: </span><input type="text" tabindex="16" /></div>
<div><span>Input 17: </span><input type="text" tabindex="17" /></div>
<div><span>Input 18: </span><input type="text" tabindex="18" /></div>
<div><span>Input 19: </span><input type="text" tabindex="19" /></div>
<div><span>Input 20: </span><input type="text" tabindex="20" /></div>
<div><span>Input 21: </span><input type="text" tabindex="21" /></div>
<div><span>Input 22: </span><input type="text" tabindex="22" /></div>
<div><span>Input 23: </span><input type="text" tabindex="23" /></div>
<div><span>Input 24: </span><input type="text" tabindex="24" /></div>
<div><span>Input 25: </span><input type="text" tabindex="25" /></div>
<div><span>Input 26: </span><input type="text" tabindex="26" /></div>
<div><span>Input 27: </span><input type="text" tabindex="27" /></div>
<div><span>Input 28: </span><input type="text" tabindex="28" /></div>
</body>
</html>This is the code of the page that has the issue (testinput_iframe.html):<!DOCTYPE html>
<html>
<head>
<title>Test input</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<iframe src="/testinput.html" />
</body>
</html>The issue is present in Safari on the iPhone, iPad and the xCode Simulator from version 8.4 to version 9.2.Someone know if this is a bug? There is way to fix it in css or javascript?Thanks and sorry for my english! 😉
Post not yet marked as solved
We have a web page that lets users to upload an image. Users can select a file from library or take a photo.Below is the html5 snippet:<input type=file capture="camera" accept="image/*" value="select image">When user clicks on "select image" and selects a file from photo library or icloud, the GPS info is retained in the image returned.Whereas , if user choose to "take photo" and takes a photo with camera option, the image returned by camera does not have GPS info.Is this a privacy feature ? Is there a user setting to turn off this behavior?Already Location is allowed for camera. Other pictures taken with camera indepdently have GPS info in the image.Pls help.
Post not yet marked as solved
I built a web app that allows a user to upload files to an Amazon s3 bucket via a webform, I unfortualy am in a sandboxed evnoronment and cannout make a JS httprequest to s3. Anyway, Amazon send a 204 response back if the PUT was a success, unless you specify it to respond with a 201. I've searched exhaustivly around the net and have found mutple older stackoverflow topics and similar sites refering to this same issue with Amazon S3 or with 204 responsess in general, on iOS. I have tested the app on multipel Android devices, in Chrome as well as all major desktop clients and it works as expected.In iOS based browsers, it returns a blank page, which is what a 204 is but that is not what the HTTP 1.1 Specs say a 204 shoudl do on a client. Can anyone help me fix this? Suggest a solution or a direction to look? What I can offer are these things :Amazon's documentation of POST responses :The status code returned to the client upon successful upload if success_action_redirect is not specified.Accepts the values 200, 201, or 204 (default).If the value is set to 200 or 204, Amazon S3 returns an empty document with a 200 or 204 status code.If the value is set to 201, Amazon S3 returns an XML document with a 201 status code.If the value is not set or if it is set to an invalid value, Amazon S3 returns an empty document with a 204 status code.Type: StringDefault: NoneNoteSome versions of the Adobe Flash player do not properly handle HTTP responses with an empty body. To support uploads through Adobe Flash, we recommend setting success_action_status to 201.The HTTP 1.1 Spec for a 204 response via the W3C :The server has fulfilled the request but does not need to return an entity-body, and might want to return updated metainformation. The response MAY include new or updated metainformation in the form of entity-headers, which if present SHOULD be associated with the requested variant.If the client is a user agent, it SHOULD NOT change its document view from that which caused the request to be sent. This response is primarily intended to allow input for actions to take place without causing a change to the user agent's active document view, although any new or updated metainformation SHOULD be applied to the document currently in the user agent's active view.The 204 response MUST NOT include a message-body, and thus is always terminated by the first empty line after the header fields.Here is a nice little tool for testing responses :http://httpstat.us/Clicking the 204 link should cause your browser to load for a second and then the page not do anything. This works as expected in all browsers, except ones running on iOS. My devices are at version 10.2.Again, I am at the mercy of Safari (the Client), this is a simple form POST that recieves a 204 response, I can not catch the response and rely on the client to handle it correclty, which it appears to not do. Thank you for your help
Post not yet marked as solved
Using WKWebView in iOS, I encountered a problem with controlling audio output level from <audio> element in HTML page.I tried the 'volume' property of the <audio> and also the Web Audio API 'GainNode'. Neither approach worked. The player's output stays/reported as 1.0.Curiously, within the same scope of code I can change player's other properties such as playback rate; this does work. But calls to 'volume' or 'GainNode' are flatly ignored. Two observations make me believe that this is a bug.The first one: if I use instead of WKWebView the old deprecated UIWebView, everything works fine; even Web Audio API AudioContext, Splitter, Merger, etc.The second observation: in the version of the app for macOS the very same HTML page and <audio> element behave as expected.Any suggestions for 'workaround' would be much appreciated,Igor Borodin
Hi Guys,We are aware that Apple have already included the media autoplay blocking mechanism in the Safari browsers. We strongly agree on this step to minimize abusive use of annoying video advertisements that plays annoying audio loud enough to blast a hole on your sound system.But what we are not really aware of is if Apple have reserved a way to facilitate autoplay for websites that offer protected premium LIVE streaming services like ours. Could you guys point us to where we might find this? This autoplay block is really affecting the user experience on our service and we are receiving a lot of complains from customers. Instructing our clients to enable autoplay manually on Safari for our website is really becoming costly for us.Bigger streaming websites such as youtube doesnt seem to be affected by these changes. Probably because of some exceptions of the rules that are pre-installed on Safari or in the way they are using autoplay. Would you guys be kindly enough to tell us how youtube is able to use autoplay while others cannot? Is it because of some special agreement they have with Apple or is there any established rules that we need to comply in our code to make Safari enable autoplay for our application?Best regards,
Post not yet marked as solved
Hi,I am currently working on a web application which is heaviliy rellying on offline storage (AppCache, IndexedDB, WebSQL). We would like to branch out and fully support IOS platform or in other words, Safari (mobile version). We are targeting iPad devices.I know that from IOS version 9 and 10 offline storage should be fully supported on Safari mobile, but I was wondering and could not find relyable source of information regarding limitations of offline storage.Does someone know (or can at least point me to the site/documentation/forum) what are the limitations of offline storage on iPads and Safari browser regarding size of the storage? I found some forum mentioning a hard limit of 50MB of data per application which won't do for the app that I am working on. It would mean a lot if to know which are the limitations before we start developing as there is no point in development if storage limits are not big enough. We are storing large amounts of data (i.e hundreds of MB).
Post not yet marked as solved
has any one seen this and/or know the solution?what could cause a pause event to get triggered? we can trap when the event gets caught in the safari debuggerbut unable to see what is causing it. like who is sending the event? is there any way to trace the sending of media events in safari? we get random pause events recv'd by our video tag, a few seconds after video start.seems to be on videos with audio playing Only, ios10.3 and upokay on ios10.2UIWebView implementation
Post not yet marked as solved
PlatformsTested on macOS High Sierra v10.13.3Safari v11.0.3DescriptionThis problem doesn't occur neither on Chrome nor Firefox. It doesn't occur on Safari over HTTP neither.It affects only POST requests (GET and OPTIONS works fine) on Safari over HTTPS.[Error] Origin [origin] is not allowed by Access-Control-Allow-Origin.[Error] Failed to load resource: Origin [origin] is not allowed by Access-Control-Allow-Origin.[Error] XMLHttpRequest cannot load [apiURL] due to access control checks.The preflight OPTIONS request is following:Request HeadersName: Value
Referer: [referer]
Access-Control-Request-Headers: content-type
Origin: [referer]
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0.3 Safari/604.5.6
Accept: */
Access-Control-Request-Method: POSTResponse HeadersName: Value
Age: 0
Server: nginx/1.6.0
Date: Tue, 06 Feb 2018 09:56:50 GMT
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name
Access-Control-Request-Method: GET,POST,OPTIONS
Accept-Ranges: bytes
X-Varnish: 2033664925
Via: 1.1 varnish
X-Cache: MISSThe POST request seems not to be sent at all: https://imgur.com/a/t78PjAs written before - it works good on Safari over HTTP and it also works on another browsers both over HTTP and HTTPS.The only problem is with Safari over HTTPS with POST request.GET requests works fine too..😕Does Safari have any special restrictions or something? What could be a problem?
Post not yet marked as solved
how to disable pinch zoom effect on safari browser ?
Post not yet marked as solved
We are developing a website which is exchanging cross site cookies. Since, the default settings for safari is to prevent the cross site tracking, the cookie is not passed in the calls, impacting the further functionalities.Is there any way to detect the current safari cookie settings using Javascript?
Post not yet marked as solved
"We have recently come across an error that exists only in Safari browser and impedes adoption of ES6.Essentially, attempting to access caller function property, which points to an async function, would result in a unahndled error.Here's a fiddle that demonstrates this issue: https://jsfiddle.net/ope31anx/1/Also here's a copy-paste of that code:MyClass = function() {
var me = this;
me.asyncFunc = async function() {
me.syncFunc(arguments);
alert('works!');
}
me.syncFunc = function() {
me.syncFunc.caller; // where error ocurrs in Safari
}
};
new MyClass().asyncFunc();Running this code in any browser other than Safari will result in "works!" alert. Running it in Safari will result in console error "Unhandled Promise Rejection: TypeError: Function.caller used to retrieve async function body".I can reproduce this in Safari 12.1.2.I can verify no such issue in Chrome 76.0.3809.132 or FireFox 69 or Edge 44.18362.329.0In our codebase this error is particularly annoying because since we use ExtJS and it uses similar approach for its callParent() implementation, which means we cannot use async/await because of Safari. My biggest surprise has been that I could not find a single entry on Google of anyone else facing this error. Perhaps it is recent.
Post not yet marked as solved
Hello Apple team and fellow developers,We are working on a website that requires users to allow microphone permission to interact with our web content.However, when we open the website link from a Facebook post, it will always use Facebook-In-App-Browser.And Facebook Browser doesn't have access to microphone permission.So we're checking if there is a way to open the link in Safari browser from a Facebook post.Here are some approaches that we tried:1. Use Safari Scheme: https://codepen.io/felquis/pen/gPLrgv2. Use FTP to open Safari successfully but we can't run the Javascript with this protocol to redirect users to our main websiteAny help, tip or confirmation if this is possible or not are all appreaciate 😟.Thank you so much in advance,Nhan
Post not yet marked as solved
In iOS 12 and 13, when selecting the html <input type="file" multiple> the browser/webview displays three options to upload files: take a photo, select from the photo gallery or browse the file system. It's possible to select multiple files using the photo gallery, but if I want to upload other types of files using the browse the file system option, multiple file selection is not possible and I can only select one.
Post not yet marked as solved
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?
Post not yet marked as solved
Hello Safari Team,Currently Safari audio does not work for Zoom calls. When wil Safari start to support Audio Worklet API? This API is already supported by Chrome, Edge, Opera, and now Firefox[1][2]. Alot of developers are starting to use tools that use Web Assembly such as Zooms Web SDK[3]. However after looking at Zoom's developer forum, there is a growing number of concerns that Safari on iOS devices is not usable for Zoom calls[4][5][6][7] since Safari does not support Audioworklet thus users are cannot hear through the device.As Apple seems like the only major browser that does not support Zoom calls. Are there any plans to adopt the AudioWorklet API in the near future?1- https://www.mozilla.org/en-US/firefox/76.0/releasenotes/2 - https://hacks.mozilla.org/2020/05/high-performance-web-audio-with-audioworklet-in-firefox/3 - https://marketplace.zoom.us/docs/sdk/native-sdks/web4- https://devforum.zoom.us/t/critical-no-audio-for-mobile-ios-browsers/19721/25 - https://devforum.zoom.us/t/there-is-no-sound-in-the-browser-on-mobile-while-using-web-sdk/17299/66 - https://devforum.zoom.us/t/when-will-we-have-a-web-sdk-build-to-fix-ios-mobile-browsers-issue-for-join-audio/168197 - https://devforum.zoom.us/t/web-sdk-not-showing-join-audio-computer-on-iphones-safari/6432
Post not yet marked as solved
Until iOS 13.3.1, synchronous XHR was working with unload in Safari, but it stopped working from iOS 13.4.I know that it works by turning off "Disallow sync XHR during page dissmissal" in the settings, but I would like to send information when the page transitions without changing the settings to the user.The same spec change is also in chrome80, which worked with fetch keepalive and sendBeacon, but neither works on iOS.Please tell me how to execute API at page transition in iOS13.4 or later.
Post not yet marked as solved
Is it expected behavior for Smart Invert to be inverting an image that is defined using the CSS background-image property?
Smart Invert works as expected by not inverting an image defined by the <img> HTML tag but does invert the background-image property image.
Post not yet marked as solved
I'm currently trying to record HTML5 video using the <input> tag.
The way I'm doing this is as so:
<input id="videoFile" type="file" accept="video/*" capture="user"/>
This works, but the video is always in 360x480 resolution. I wish to know if there is a way to increase this.
I've tried going into the camera settings of my iPhone XR, but none of the 6 options there make any difference to the recorded video.
A source I found from 2016 said that 1080p 60fps would work, and the rest would not. I think this may have changed since.
If this is a duplicate question/issue, I apologise as I have not found it.
Thanks for any help!
Post not yet marked as solved
Issue
My web application built using nuxt and installed as web app on iphone becomes unresponsive after I open or visit an external link from the app. Issue specifically comes iOS 13.4 and above on real devices. Simulators works fine.
Devices
iPhone X and XI (all versions) with iOS 13.4 and above
Steps to reproduce
Open nuxt-min-pwa.netlify.app safari.
Tap on share icon and then add to home screen.
Open app from home screen.
Tap on menu icon.
Tap on second.
Tap on link named ICE.
App will open an external url.
Tap on Back to App button to return to the app.
Tap on second now.
10. App does not responds. A thin loading bar seems to be in progress, everytime second is tapped. But nothing else happens.
Web app is working fine in iphone8 (tested with ios13.3.1 and ios 13.6.1) and Xcode simulators.
Post not yet marked as solved
[Assert] Failed to present a context menu for configuration with identifier 76F4D464-627B-4966-B90F-45D76EA6F285. This is likely due to a different presentation occuring during the lifecycle of the interaction.
this project run in ios12 is ok.
a new demo run in ios14 is ok.
but this project run in ios14 is bad.
url:
h5apk.cn/input-capture.php
WKWebViewConfiguration in ios14 change?
