mobile-webkit

The Design The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below. The Code input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); } The Issue iOS v4+ does not display the box-shadow properly. See image below. Tested I have attempted using -webkit-box-shadow. -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25

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? Not all browsers support the same date formats. The best approach is to split the string on the separator characters ( - , and : ) instead, and pass each of the resulting array items to the Date constructor:

I'm having trouble getting @font-face to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android. It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and Opera. The fonts and CSS are from FontSquirrel: @font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic-webfont.eot'); src: local('☺'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../fonts/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format(

How to flip any background image using CSS? Is it possible? currenty I'm using this arrow image in a background-image of li in css On : visited I need to flip this arrow horizontally. I can do this to make another image of arrow BUT I'm just curious to know is it possible to flip the image in CSS for :visited You can flip it horizontally with CSS... a:visited { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } jsFiddle . If you want to flip vertically instead... a:visited { -moz-transform: scaleY(-1

I had previously been using iScroll plugin but wanted to drop it for the native behaviour. The initial implementation was using webkit-overflow-scrolling: auto; however I updated this to ... webkit-overflow-scrolling: touch .. to enable the motion/inertia on the touch scroll. The issue with this is the list items contained within the navigation disappear completely when scrolling, and only return once the momentum has come to a rest. An example of this can be seen here Mark Napthine I have had the same problem in the past, if you need to use positioned elements try adding -webkit-transform:

I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute: list-style-image And then giving it a URL. However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol. Can this be done or am I forced to make it a graphic first? TJ WealthEngine API Evangelist The following is quoted from Taming Lists : There may be times when you have a list, but you don’t want any bullets, or you want to use some other