mobile-webkit

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

Samsung Galaxy Tab 10.1 and -webkit-tap-highlight-color style?

大憨熊 提交于 2020-01-15 08:58:28
问题 I'm trying to turn off the default Android web 'highlighting' (the -webkit-tap-highlight-color style 'fix' that is recommended everywhere) - this works great on most devices, but not my Galaxy Tab 10.1 - anything with a 'click' handler, will always get highlighted in the default 'dark' colour when it is 'clicked' in the browser. eg. I have this in my CSS : * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } then using jQuery setting up a 'click' hander on a div : < div id="test" >some kind

dojo and the offline application cache

我与影子孤独终老i 提交于 2020-01-05 07:06:07
问题 We've been working on an offline capable JavaScript applicaion using Dojo and the storage and offline capabilities available in newer browsers. The application is quite large, but it seems to load the larger files from the cache, and I can see that the application is in deed cached. Were using the applicationcache features, and there are no errors in the application cache as far as I and Chrome can see. However we run into problems. Apparently Dojo cannot load its lanugage resources, nor the

-webkit-tap-highlight-color not applied to area tag

懵懂的女人 提交于 2020-01-03 17:20:48
问题 Ok, I know this has been asked many times, but my situation is a bit different: I have an image map and I don't want Android/iPhone to display the green border (gray overlay on iPhone) when an AREA on the image is tapped. I have tried -webkit-tap-highlight-color: rgba(0,0,0,0) and it seems to work for an <a> link but not an <area> . I guess the problem is that in fact no CSS can be applied to <area> ? Can this somehow be circumvented? I don't want the user to see the green border when he taps

HTML5 video behavior on mobile devices

◇◆丶佛笑我妖孽 提交于 2019-12-29 05:18:50
问题 I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices. When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like: window.onload = function()

-webkit-overflow-scrolling breaks absolute positioning

那年仲夏 提交于 2019-12-22 05:16:17
问题 I am building a page that needs to have some elements which stick to the top of the page when they would otherwise be scrolled off the screen. I managed to do this using position:absolute . Everything was working perfectly, but it needed momentum scrolling. I added -webkit-overflow-scrolling: touch to the css of the scrollable area. This broke everything. My sticky elements with position:absolute are now just scrolling with the rest of the content. My question is this: Why does -webkit

Input elements on android 4.x can not be styled when focused

隐身守侯 提交于 2019-12-20 17:58:11
问题 Update: There is a fix: -webkit-user-modify: read-write-plaintext-only; Original question: I am trying to boil this down to a simple example: I have a simple input element like this: <input class="myclass" type="text"/> the style looking like: .myclass, .myclass:focus { background-color: black; } this works fine on android 2.x and 3.x (except some devices that are known not to respect css on focused input elements) Since I updated a nexus S to 4.0.3 I can`t get the input field to accept any

Input elements on android 4.x can not be styled when focused

依然范特西╮ 提交于 2019-12-20 17:57:31
问题 Update: There is a fix: -webkit-user-modify: read-write-plaintext-only; Original question: I am trying to boil this down to a simple example: I have a simple input element like this: <input class="myclass" type="text"/> the style looking like: .myclass, .myclass:focus { background-color: black; } this works fine on android 2.x and 3.x (except some devices that are known not to respect css on focused input elements) Since I updated a nexus S to 4.0.3 I can`t get the input field to accept any

HTML5 contenteditable attribute not working properly on iOS7 Mobile Safari

余生颓废 提交于 2019-12-20 10:43:41
问题 It seems that the contenteditable attribute (which worked fine on iOS6) has stopped working on iOS7 webkit. Though the browser seems to recognize the field as editable, and brings up the keyboard, any input seems to close it, or it fails to register. Any encounter the same problem, or have any workarounds? You can try it out over here - http://html5demos.com/contenteditable Thanks! 回答1: I ran into this problem today. The solution for me was to set user-select to " text " in the CSS for any

Javascript date parsing on Iphone

怎甘沉沦 提交于 2019-12-17 15:33:34
问题 I'm working on an offline capabable Javascript site that targets mobile devices. One such mobile device is the IPhone. I'm trying to parse a date from our REST API (a member of JSON object). I'm using Date.parse("2010-03-15 10:30:00"); This works on Android devices, however on IPhone it just gives an invalid date. How do I need to format my date string so it can be parsed by the IPhone? 回答1: Not all browsers support the same date formats. The best approach is to split the string on the