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> 回答1: After some more research, this appears to be related to a focus jumping bugs in iOS. (https:/

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

Background color and rubber-band scrolling in Mobile Safari

阅读更多关于 Background color and rubber-band scrolling in Mobile Safari

问题 I'm building a webpage in Mobile Safari with a fixed header/footer and rubber-band scrolling in the main content: html, body { margin: 0 0; height: 100%; width: 100%; overflow: auto; } .header, .footer { height: 50px; position: fixed; z-index: 100; width: 100%; } .header { top: 0; background-color: #44677F; } .footer { bottom: 0; background-color: #4E3AFF; } .container { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .content { background-size: 50px 50px; background-color:

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)

How to synchronize the scroll offset of two elements during inertial scrolling

阅读更多关于 How to synchronize the scroll offset of two elements during inertial scrolling

问题 I need to keep the scroll offset of an element in sync with another (the window actually) and I'm having trouble doing so during the inertial "roll off" phase of scrolling on Mobile Safari (iPad). I have a couple of divs with position:fixed; overflow:hidden and I need to keep their scroll offset in sync with the window's one (meaning the entire body scroll.) Usually I'd code it like this (jQuery): var $win = $(window), $div1 = $(...) $win.scroll(function() { $div1.scrollTop($win.scrollTop())

SECURITY_ERR: DOM Exception 18 when invoking toDataURL method of the Canvas

阅读更多关于 SECURITY_ERR: DOM Exception 18 when invoking toDataURL method of the Canvas

问题 I am getting the following error while trying to retrieve the data URL from a canvas on which an SVG image is drawn on Internet Explorer and Safari browsers while the others are working properly. In addition, the SVG image contains some <image> elements whose xlink:href attributes are set to images read from the user's file system as data URLs. Since these images are not located on different domains, i could not think of any reason why this error is thrown when trying to get the dataURL of

iframe is cut when in div on mobile safari

阅读更多关于 iframe is cut when in div on mobile safari

问题 I would like to scale an iframe on mobile safari . I am including an iframe inside a div . <html> <body> <div id="iframe_container"> <iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/> </div> </body> </html> Now I am scaling the div with this code: $(function() { $('#iframe_container').css({ '-webkit-transform': 'scale(0.7)', '-webkit-transform-origin': '0 0 ' }); }); On iOS /Safari, the iframe is cut (i.e. can't be entirely seen) while on desktop/chrome,

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. 回答1: You're right, CSS 2D transforms aren't hardware accelerated in Mobile Safari

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? 回答1: 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:

How can I launch the Maps app from Mobile Safari on an iOS device?

阅读更多关于 How can I launch the Maps app from Mobile Safari on an iOS device?

I want to launch the maps application from my mobile website. How can I accomplish this? You use simple HTML links; iOS will recognize and open it. Here is the documentation you need. Hope it helps! 来源： https://stackoverflow.com/questions/6614096/how-can-i-launch-the-maps-app-from-mobile-safari-on-an-ios-device