mobile-safari | 易学教程

Tabbing through input fields in mobile Safari makes browser jump

阅读更多关于 Tabbing through input fields in mobile Safari makes browser jump

Is there a way to focus on the field, but without this jarring animation? The behavior is especially bad when the keyboard is visible. Demo http://plnkr.co/edit/9OydOFO0KUeKuaH8u70A?p=info <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <form> <input> <input> <input> <input> <input> ... <input> </form> </body> </html> After some more research, this appears to be related to a focus jumping bugs in iOS. ( https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios#focus-jumping ) One neat trick that fixed it

Debug slow angular-ui-router state change on Mobile Safari

阅读更多关于 Debug slow angular-ui-router state change on Mobile Safari

I'm writing an angular app, using angular-ui-router to manage states / routing. On desktop browsers (Chrome / Safari) this is working fine. However, on Mobile Safari on IOS 6 on iPhone 4 (and to a lesser extend on IOS 7 on iPhone 5) changing state, via $state.go, can take anything up to 2 seconds. I'm using ngTouch, so I don't think that it's the 300ms that the native click event takes to fire. ngClick attributes that don't call $state.go now seem to work pretty much instantaneously. How can I debug this to find where the time is being spent? ngTouch doesn't work with the ui-sref directive. We

Mobile Safari HTML5 video - event listener 'ended' does not fire the 2nd time

阅读更多关于 Mobile Safari HTML5 video - event listener 'ended' does not fire the 2nd time

I am trying to add a button when pressed will play a video, and when the video ends an image is displayed. The problem is that the 2nd time i press the button, the video ends, and nothing happens as if the event listener does not get called. var video = document.getElementById("video"); function playVideo() { video.style.display="block"; //video.load() [adding this the 2nd time wont play] video.play(); video.addEventListener('ended', videoEnd, false); } function videoEnd() { video.style.display="none"; bg_image.src="image.jpg"; } I believe that the "ended" event no longer fires when a VIDEO

navigator.getUserMedia alternative API for iOS safari mobile browser?

阅读更多关于 navigator.getUserMedia alternative API for iOS safari mobile browser?

I know with below code will capture a image from ios 6+ safari mobile browser <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput"> Is there any other way of capturing a image from safari mobile browser using html5/JS? Is there any alternative for WebRTC MediaStream API in iOS safari mobile browser? Safari does not support WebRTC yet. http://iswebrtcreadyyet.com/ To start with WebRTC on iOS, you may explore this demo https://github.com/ISBX/apprtc-ios . It't not exactly the same as you're looking for. The demo app achieves video chat. But it should be

iPhone Mobile Safari, How many max parallel http connections?

阅读更多关于 iPhone Mobile Safari, How many max parallel http connections?

I would like to use parallel AJAX HTTP requests with iPhone Mobile Safari (OS4). What is the max number of parallel connections? If I'm not mistaken, Safari uses at most 4 connections to the same server, but you can test it yourself using this little test case (if you have access to an iPhone, of course). Test site provided by Marcel returned 6 connections on my iPhone 3GS. 来源： https://stackoverflow.com/questions/2940559/iphone-mobile-safari-how-many-max-parallel-http-connections

iPad Scrolling to Top of iframe

阅读更多关于 iPad Scrolling to Top of iframe

I did my best to recreate this in something accessible. I've got an ipad mini running ios7 and am using something similar to this: <div id="holder"> <iframe height="100%" width="100%" src="http://www.cnn.com" id="iframe"></iframe> </div> #holder { height:500px; width:100%; overflow:scroll; -webkit-overflow-scrolling: touch; } See fiddle: http://jsfiddle.net/khJgY/4/ Now the issue is, scrolling in the iframe works fine. But if you change focus (say to one of the other HTML/CSS/JS edit boxes) the iframe scrolls back to the top left and I have no idea why. Any help would be appreciated. The

SVG as border-image on retina screens

阅读更多关于 SVG as border-image on retina screens

Please consider we have simple SVG file, containing code for rounded rectangle which corner radius equals 10: <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <rect fill="#FACE8D" x="0" y="0" width="100" height="100" rx="10" ry="10" /> </svg> Here how it looks like in Chrome: Now we use this image as a value for border-image property in CSS: .box { @include border-image(url('rounded-rectangle.svg') 10); border-width: 10px; background: #FFF; width: 50px; height: 50px; } Now let's take a look on how it looks like in different browsers and devices: brilliant, the image stretched

How can I prevent keyboard autocompletion in MobileSafari/UIWebView?

阅读更多关于 How can I prevent keyboard autocompletion in MobileSafari/UIWebView?

I'm implementing my own autocompletion on an <input> field inside a UIWebView, and the built-in keyboard autocompletion interferes with the user experience. Is there a way to use HTML or Javascript to signal to iOS that it shouldn't try to autocomplete? In my comments I mentioned using the html attribute autocomplete but I tested it, and it doesn't address your issue. However, there is an attribute specific to Mobile Safari which may help. You could try turning off autocorrect like so: <input type="text" id="your-field" autocorrect="off" /> 来源： https://stackoverflow.com/questions/6461101/how

Are 2D transforms hardware accelerated in Mobile Safari?

阅读更多关于 Are 2D transforms hardware accelerated in Mobile Safari?

I've often been told that CSS 3D transforms are hardware accelerated in Mobile Safari which makes me wonder if the implication is that 2D transforms are not? I can think of no reason why they wouldn't be, since they can basically all be implemented as 3D transforms, but I would like to know for sure. If it turns out that 2D transforms are not hardware accelerated, any insight as to why would be much appreciated. You're right, CSS 2D transforms aren't hardware accelerated in Mobile Safari, but 3D transforms are. I'm not sure why it's that way, but perhaps they decided it was overkill for most

Website javascript not running on iphone (safari)

阅读更多关于 Website javascript not running on iphone (safari)

I do not have a specific block of code to post here, my website includes a fair bit of javascript/jquery which works great on android and modern desktop browsers (including Safari). However when I look at the site through an iphone none of the javascript is running. Site is www.alexchapman.co.uk, I have checked that js is enabled on the iphone and I am not getting any error messages on the phone. The site is a bit slow so I am connecting to the site on the iphone via a wi-fi connection. My question is where do I begin trying to sort this out. I don't have access to a mac. Is there anything I