mobile-webkit

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 styles. Some testing revealed the following: The styles are actually applied, but for some reasons the

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! I ran into this problem today. The solution for me was to set user-select to " text " in the CSS for any editable elements: * { -webkit-user-select: none; user-select: none; } input, textarea, [contenteditable] {

I'm working on a site, but I want a mobile friendly version aswell. I'm a newbie to this. Someone suggested I should use the following code, to which I can't find many relating question on here: <meta name="viewport" content="width=320, initial-scale=1"> The problem is that I have no idea how to implement it, and I know that cannot simply convert the whole page. What I am requesting is some pointers on how I can reach my goal. http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ gives you an introduction to the various aspects of the viewport meta tag. For

Am I just going crazy, or does background-attachment:fixed; really not work in the native Android browser? I already implemented a simple fix by using two divs instead of one... The first div is positioned absolutely and contains the fixed background image, the other div goes on top of it and contains the scrolling content. The issue with this fix (aside from the unnecessary complication) is that for some reason, when I am scrolling the content over the background image div, the background image disappears altogether! :( Has anyone else found a workaround that isn't buggy, or how exactly are

How to make bevel and Embosed effect to Submit button in CSS 3 ? Like this. Enlarged Image I'm only considering Web-kit based browsers. and I'm not asking about How to give round corner and how to give gradient to button, I'm only asking about bevel effect Html <input type="submit" value="Submit your entry" class="input" /> methodofaction This is possible without the use of extra mark-up through the use of multiple box-shadows: box-shadow: 0 1px 2px #fff, /*bottom external highlight*/ 0 -1px 1px #666, /*top external shadow*/ inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ inset 0

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() { var pElement = document.getElementById("myVideo"); pElement.load(); pElement.play(); }; But this will