bootstrap 3 navbar-top-fixed issue in android webview - android

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

Related

Angular 7 website crashing on android WebView when linked from Facebook/Instagram

I have searched through all sources I could find and tried everything, but can't seem to find a solution. I have a website (Angular 7 form) that runs perfectly on all devices and all browsers BUT when I posted a link on Facebook, on Android phones it opens in Facebook's WebView browser and crashes when hitting the first button or when pressing the three dots in the browser corner. The WebView browser works well on some Iphones, but some have the same issue. Also the css stylings are not similar, the background is not covering the whole device and button is almost not visible. I tried posting a link straight to the other pages on the site, and always when navigating to next page on the router or tapping basically anything on the page, it crashes.
Some testers claimed that they could make it to the third page (out of 8), and then it crashed.
I've read about fixes and tried the following:
Removed Google Tag manager script, since it was inside an Iframe
Changed CSS styling so that there are no width/height values in
pixels or percents
Added viewport meta tags
Checked that all URL:s are https
Removed target="_blank" from a link on the last page
Changed CSS styling so that positions are absolute
Is there something else that the WebView doesn't support? Where do I find this information or should I just keep guessing? Is there a way to debug the WebView somehow, when it's not my own app's WebView but Facebook's?
Thanks in advance, this is such an annoying problem! Unfortunately this website is the kind that will be published through social media.
So I finally solved this (workaround), with only one line of code. My workaround is to redirect the user to an external browser, when it tries to open in Facebook's or Instagram's In App browser.
I detect if it's FB or Instagram and then run this line of code in the html:
<meta http-equiv="refresh" content="0; url=intent://YOURURL#Intent;scheme=https;action=android.intent.action.VIEW;end;" />
Hope this helps someone, these In App browsers seem to be a real pain!

How to load view and title together using AngularJS and Ionic on Android?

I have an app running on AngularJS and Ionic and I have a problem with state transition with Android devices but not on iPhone/iOS.
One page is quite large and when I navigate from the home screen to this page the header gets loaded first and after 2-3 seconds the actual view changes.
I tried adding ng-cloak to the ion-view but this doesn't solve the problem.
What do you mean by that your view is getting changed? Also in which versions of Android are you facing this problem?
Unfortunately it seems a problem very device oriented. You could try to change some elements to enhance perfomance like changing your ng-repeat for collection-repeat.
The best way you could try to improve your performance in Android comes to the cost of weight in your App. You could try using Crosswalk Webview Plugin. This not only provides you the great webview capabilities where your native webview lacks the performance but also it is providing feature constancy across Android 4.0+ Platforms.
See this:
http://blog.ionic.io/crosswalk-comes-to-ionic/
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview

Bootstrap 3 responsive not working on mobile of android internet explorer

i am using bootstrap 3.I am testing out Bootstrap 3 responsiveness navbar and I have a website link . When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons and converted it in to 12 grids as per code.
But when I tried it from my mobile browser (I tried it on internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
I have already added this code in head section.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
but still its not working.(you can check from your mobile for proof).
Could anyone point out what I am doing wrong?
hello friends,
As waki pointed out my problem that i put meta tag for the viewport is not correct although i have updated here correctly but in my original site i have written like as waki mentioned above. thanks waki for your valuable comment.

CSS + Phonegap = Not rendering correctly

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,

Changing iframe src breaks scrolling in Android Phonegap application

I've an interesting bug here for a Phonegap application in android. I first noticed that the scrolling wasn't working in the emulator, or on some specific devices (It does work on my phone, wich is platform 2.3) and tried every recommendation to fix that including multiple here in SO suggesting; 1, native side fixes and 2, adding the iScroll library. However, none of the solutions worked. Also the unavailable scrolling only affected specific pages, and not the entire app.
I've narrowed the problem down to this line of code, which replaces the src attribute of an iframe. It is intended to show the thumbnail of a youtube video where the url is being obtained via an external content api.
$('#video').attr('src', newUrl);
and the iFrame markup
<iframe class="youtube-player" id="video" type="text/html" src="js/views/loading.html" frameborder="0"></iframe>
I've tried hard coding the url in the markup, and it works fine, It's something about the act of replacing the iframe's source that breaks page scrolling.
I'm sing Phonegap/Cordova 1.8.1 and the minimum target android platform is 2.2
Thank you in advance for any help.
*Edit: Seems to be something involved with the viewport as removing the tag stops whatever is breaking the scrolling.
I had a similar issue with an Android application I was creating using PhoneGap. The issue I had was that as the data in the iframe changed, the amount of scroll-able space changed as well so some pages would scroll too far and some not enough.
In order to fix this, you have to use some JavaScript to adjust the height of the iframe based on it's content when the content is loaded.
I found my answer from this question: Phonegap HTML5 / Android App - Iframe height issue
The answer from that question suggests using the onload attribute on the iframe to call a javascript function that adjusts the height of the iframe to match the content.
The javascript itself looks like this: where obj is the iframe element that gets passed into the function.
function resizeIFrame(obj){
obj.style.height = obj.contentWindow.document.body.offsetHeight + "px";
}
Now, anytime the source of the iframe changes, it will adjust the height based on that content and should fix your scrolling issue.

Categories

Resources