mobile-safari

iPad Safari elements disappear and reappear with a delay

自闭症网瘾萝莉.ら 提交于 2021-02-08 12:13:49
问题 For this bug I have referred the below stack overflow question and have applied in the css as follows (Refer: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay) *:not(html) { -webkit-transform: translate3d(0, 0, 0); } After applying, I am facing a new issue. That is if I apply fixed position for an element, that's not fixed in the browser top instead of scrolling. If I remove the above css, It is working fine. (Refer: Position fixed not working is working like

javascript in mobile safari (iOS) won't download calendar invite

大憨熊 提交于 2021-02-07 20:54:15
问题 I have a js client side application wherein I create a calendar event and want to download it to the client as an ics file. This works fine on desktop browsers, but mobile safari (and mobile chrome) on iOS refuse to download it. Here is the code I am using for the function: let link = document.createElement('a') // link.setAttribute('target', '_blank') link.href = ics_string_from_indexedDB link.download = 'Reminders.ics' link.click() When I use the code above and click on my link, mobile

javascript in mobile safari (iOS) won't download calendar invite

不打扰是莪最后的温柔 提交于 2021-02-07 20:49:28
问题 I have a js client side application wherein I create a calendar event and want to download it to the client as an ics file. This works fine on desktop browsers, but mobile safari (and mobile chrome) on iOS refuse to download it. Here is the code I am using for the function: let link = document.createElement('a') // link.setAttribute('target', '_blank') link.href = ics_string_from_indexedDB link.download = 'Reminders.ics' link.click() When I use the code above and click on my link, mobile

Unwanted auto-scrolling to top on input focus, with Safari

落花浮王杯 提交于 2021-02-04 15:18:30
问题 I have this page: <html> <body> <div class="app"> <div class="main-panel"> <nav class="navbar"></nav> <div class="sidenav"> <ul> <li>First</li> <li>2nd</li> <li>3rd</li> <li>4th</li> </ul> </div> <div class="page-container"> <div class="placeholder"> <ul> <li>First</li> <li>2nd</li> <li>3rd</li> <li>4th</li> </ul> </div> <input type="text"> </div> </div> </div> </body> </html> And the following css: html, body { height: 100%; width: 100%; position: fixed; overflow: visible; } .app {

Can I http poll or use socket.io from a Service Worker on Safari iOS?

痴心易碎 提交于 2021-01-29 15:58:19
问题 I'm building a PWA that on Android uses Push Notifications to receive alerts. Of course, Safari/iOS doesn't support Push Notifications, so I need to implement an equivalent. Can I have my Service Worker poll for data, either using http long timeouts or socket.io? On receiving an alert, the SW will focus/create an app window to then deal with the UX. If there is a list of cans & can'ts or dos * don'ts for service workers, that would be great. 回答1: No, that is not possible. You cannot keep the

Debugging iPhone Safari from a PC (without an Apple device)

可紊 提交于 2021-01-29 09:11:43
问题 Is it possible to debug iOS Safari without owning an Apple device? I've deployed a React app I've been working on , and later found out the app looked weird when viewed from an iPhone. I live in a country where iPhones are not as popular, and I don't own any Apple device myself. I manually tested the iPhone view using both Firefox's and Chrome's responsive design mode, but couldn't replicate the bug. I've searched for ways to debug iOS Safari from a PC, and(1) found(2) some(3) answers(4), but

How do I just get my href=“tel:” on the latest version of Safari to immediately recognize it's a phone call and show the “Call” button?

半城伤御伤魂 提交于 2021-01-29 05:28:13
问题 We have a call button on our web application. It's a simple button that uses the standard href="tel:" function. Here is a snippet of what my call link looks like. <a href="tel:1-234-867-5309" class="btn btn-success font-weight-light callus-btn py-2" title="Call us today!"><span class="text-uppercase">Call Us</span> <br>{{$contactSetting->format_phone}}</a> The latest version of Safari appears to have changed the behavior to a long gesture, which requires a click of more than a second, then

SVG animations artifacts on Safari

为君一笑 提交于 2021-01-29 02:06:21
问题 I'm using d3.js to do some svg layout/animations and am running into the problem described by the first example here (only on Safari / Safari mobile): http://www.mysparebrain.com/svgbug.html (e.g., when the rect+text moves, it leaves rendering artifacts in its path) Does anyone know of a workaround for this? The only similar question on SO I could find is this unanswered one: Canvas draws artifacts in Safari for animated, filled bezier curves 回答1: You should definitely file a WebKit bug

SVG animations artifacts on Safari

允我心安 提交于 2021-01-29 02:05:02
问题 I'm using d3.js to do some svg layout/animations and am running into the problem described by the first example here (only on Safari / Safari mobile): http://www.mysparebrain.com/svgbug.html (e.g., when the rect+text moves, it leaves rendering artifacts in its path) Does anyone know of a workaround for this? The only similar question on SO I could find is this unanswered one: Canvas draws artifacts in Safari for animated, filled bezier curves 回答1: You should definitely file a WebKit bug

Why does mobile Safari cut off the text in an input form?

回眸只為那壹抹淺笑 提交于 2021-01-28 11:57:26
问题 Why does an input form on mobile Safari have more padding inside it and push the text to the right so it gets cut off? I set the width of the input field at 20px which is plenty for the desktop web but on mobile it needs >26px. ^ Desktop Safari Web Input Form ^ ^ Mobile iOS Safari Input Form ^ CSS .phone-input { width: 20px; text-align: center; font-size: 16px !important; height: 1.75em; //border: 0; outline: 0; background: transparent; } HTML '<div class="phone-field">'+ '(<input class=