I'm facing a problem that i've been fighting from a long time, but i still don't have an answer. I looked for it in tons of foruns and websites, but nothing really works. Anyone faced the same problem and solved it?
The problem: I have a page with multiple divs on it, and each div is a page. Everytime i click on a button, one of the divs get visible and the others hidden. Here comes the problem: If i click multiple time on different links (to change the visible div), it stops rendering the correct content and blocks in one of them. I noticed that the contect is loaded, just don't render on the screen. I noticed it, because if i turn the cellphone in landscape and then in portrait, the content renders correctly and shows what i wanted.
Seems that this error occurs because the phone doesn't render the content properly. Is there a way to solve it? Maybe forcing the renderization? How can i make it? i couldn't find anything.
I looked and tried tons of codes, the one that worked for me was using the followind css, but it brings me a lot of problem. The textboxes start moving when i type and sometimes it doesnt accept some characters, and many other strange problems.
The code: -webkit-transform: translate3d(0px,0px,0px);
I'm using in my html files the following code also: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">. It allows me to have fixed header without using any js library.
The tools i'm using: Phonegap 2.5, android 2.3.4
Any idea?
Thank you
PS: I decided to don't publish the code, because it doesn't seem to be related with what i write, but with some bug..
I think if I remember correctly the Android 2.3x browsers do not support translate3d
that should be the problem try running it on a 4.x AVD and see if it works
This guy solved the problem:
Android WebView renders blank/white, view doesn't update on css changes or HTML changes, animations are choppy
Seems that its the only way to solve it properly, i didn't find anything but this solution...
I had a problem similar to this, and the bug was caused because i was using "css content" property (content: '';).
If you are using this, try to remove.
best,
Related
I know there are tons of ios display problems in stackoverflow and other places online and all of their one solution is giving
web-kit-appearance: none
such as the post below
CSS submit button weird rendering on iPad/iPhone
But I happen to know that this also kills the radio buttons and checkbox in androids. It solves the ios styling problem and another problem comes up.
Does anyone know any solutions about this?
This is the iDevice overwriting your case button styles. You can make use of the !important tag to overwrite the rendered styles.
I'm currently working on an Android app that displays a simple html-document with some css. However, the html changes based on the day, once I've gotten that implemented at least, so there will some days where it will have more elements than it did previously. Now, where the problem lies, is that when there are a many elements, the bottom ones won't show. They are hidden outside the screen, and there is no scrolling.
How would I go about making the page scrollable? This is only for android. I can't use iScroll, seeing that it requires a list-structure in the html, which I don't have and it would be a pain to rewrite the script that makes the html file :/
Thanks
I am building a small site and ran into a small problem. I am using MixItUp to filter and sort blocks. I am also using a search field to search through the titles of each block and display relevant ones. Everything works fine on all devices and browsers except for Android.
On Android when I tap into the search field my keyboard slides up and then slides away again without giving me a chance to type anything. I tried googling the problem and only relevant thing I could find was this post but I am not sure how to proceed because I have no clue what event listeners would be disrupting the android one.
I am not a very experienced developer (self-taught and still learning lots) so I am not sure how I would go about correcting. My plan right now is to just remove pieces of code until keyboard starts working and then go from there once I identify what is causing it.
The Website is teste3.khalidsleiman.com
I figured out it was a jQuery snippet that I was using to relocate the input field to a different spot on my page depending on window size. Now I only have it set to run that snippet on document load instead of window load and resize. Keyboard is showing up now.
I have the following contenteditable area
<div contenteditable="true"><p><br /></p></div>
The "<p><br /></p>" is from the database. It's not I hardcarded it on HTML. So I can't change that. That's a very strange behaviour for Chrome on Android.
When I type 'ok', press enter, and then press backspace again, the text is autocorrected as 'OOk'. And the cursor is still on the second line.
You can try this with Chrome for Android: http://jsfiddle.net/73s4pjz9/
How can I solve this strange bug?
Well, you can't, sadly.
To my knowledge (and I've spent hours researching this infuriating bug), there isn't a way to fix it on your end because it's a bug with the WebView class that hasn't been fixed for about 2 years. Basically what happens is Android's autocorrect engine gets out of sync with the contenteditable's selection and things get messy.
Sadly, I wasn't able to find a solution to this bug, so your best bet is to either make Android users suck it up or give them a native textarea without the cool WYSIWYG features.
I am working on a webapp which uses the latest bootstrap (3.1.1). I use this carousel sample app to build the main skeleton of the app.
In each of the slides I will have my actual page content. In one of the slides I generate tables with a different width.
The problem seems to appear only in Android Webview when the width of the table is bigger than the actual width of the device. The navbar gets white or invisible. I am not sure, but I can not see it. I am able to click on the navbar toggle(even though doesn't appear) and it does show the navbar items.
Did anybody else had this problem before ? It only seems to happen in the android webview. I tested this in chrome for android and everything works as expected.
I will try to reproduce this in a fiddle, but I hope I can get some tips by then.
Florin.
UPDATE: fiddle here: http://www.bootply.com/123049 (please test the fiddle in Android webview).
I found out that the position:fixed applied to different elements behaves buggy in android default webview. more details (maybe a possible solution) here: follow the link
also try to set the metatag like following:
<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />
For iOS 5 link here iOS issue with position fixed explained
A solution that I specifically found for my problem was setting sScrollX datatables parameter to 100% (datatables is the script used to generate tables).
Also here caniuse stats: http://caniuse.com/css-fixed