I've created one App using Phonegap and HTML5 (jqueryMobile). I've put rotate3D for one div,
it is working fine in google chrome and Safari, but it is not working in Android 2.3+
Any suggestion?
I think It is a bug of android browser. I make a function to test if rotate3d is supported and it says Yes:
function styleSupport( prop )
{
var vendorProp;
var supportedProp;
// capitalize first character of the prop to test vendor prefix
var capProp = prop.charAt(0).toUpperCase() + prop.slice(1);
var prefixes = [ "Moz", "Webkit", "O", "ms" ];
var div = document.createElement( "div" );
if ( prop in div.style )
{
//browser supports standard CSS property name
supportedProp = prop;
}
else
{
//otherwise test support for vendor-prefixed property names
for ( var i = 0; i < prefixes.length; i++ )
{
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style )
{
supportedProp = vendorProp;
break;
}
}
}
// avoid memory leak in IE
div = null;
return supportedProp;
}
alert(styleSupport('perspective'));
alert(styleSupport('transform'));
As you can see her, CSS transforms3D are not supported by Android 2.3 :
http://caniuse.com/#feat=transforms3d
try to upgrade to Android 4 (it works for me)
Related
I am setting accessibility identifier for my components in react native using testID in iOS and accessibilityLabel in android. For iOS is working fine but for Android it my identifier is appended with , (a comma and a space). I am not sure what is causing issue. Here is my code:
const renderAccessibilityLabel = (str) => {
const propsForAutomation = {};
if (Platform.OS === "ios") {
propsForAutomation.testID = str;
} else {
propsForAutomation.accessibilityLabel = str;
}
return propsForAutomation;
};
// Inside render method:
<Text {...renderAccessibilityLabel("MyText")}>{MyText}</Text>
result > ios: MyText
android: MyText,
I don't know whats wrong with code :(
There was a bug with react native that was fixed in 0.60.5.
My guess is you are using an earlier version (0.60), updating will correct this.
Problem occurs in ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
Line 178 contentDescription.append(accessibilityLabel + ", ");
Just in case you can't update for any reason, it can be fixed by adding contentDescription = contentDescription.replaceAll(", $", ""); just above the line if (contentDescription.length() > 0) {
Or by replacing the file with the changes in https://github.com/facebook/react-native/commit/812abfd.
Good day folks.
I am stuck with a strange problem and after lots of googling I couldn't find the solution/answer
I am creating and Sencha +cordova app for android.
It simply display 10 images in loop.
my code works fine on Chrome browser in desktop.
It fails On android 4.4.2 device when I install as APK.
Please help to fix the code for android.
init: function () {
this.callParent(arguments);
//console.log('init');
if(Ext.os.name == 'Android')
baseurl = baseAndroidUrl;
else
baseurl = baseDesktopUrl;
//alert('baseurl ' + baseurl);
}
var baseurl;
var baseAndroidUrl = 'file:///android_asset/www/resources/resources/images/';
var baseDesktopUrl = '/resources/resources/images/';
var imageArray =
['page00.jpg',
'page01.jpg',
'page02.jpg',
'page03.jpg',
'page04.jpg',
'page05.jpg',
'page06.jpg',
'page07.jpg',
'page08.jpg',
'page09.jpg',
'page10.jpg'];
var counter = 0;
-----------------------------------------------
onPrePageCommand: function () {
console.log('onPrePageCommand');
if( counter === 0 )
return ;
counter--;
// Folloing dynamic updation doesn't work in android , works perfectly on desktop
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
//Ext.getCmp('pageID ').doLayout();
},
onNextPageCommand: function () {
console.log('onNextPageCommand');
if( counter === imageArray.length-1 )
return ;
counter++;
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
},
------------------------------------------
//initial view : work perfect for both Desktop browser and APK
{
xtype: 'image',
src:'resources/images/Page00.jpg',
id:'pageID',
mode:'image'
height:'100%',
width:'100%'
}
--------------------------------------------
Try to use a Framework for that like http://wowslider.com/ this worked great for me the last time. You can also scroll the images with your fingers (swipe them).
I wrote this script for a navigation menu on the phone. If an item has drop downs, it prevents the link, then displays the drpdown.
$(document).ready(function() {
var bodyWidth = window.screen.availWidth;
if(bodyWidth <= 600) {
$('ul.dropdowns li > a').click(function(event) {
var parent = $(this).closest('li');
var nester = $(this).closest('li').closest('ul').closest('li');
var type = parent.attr("class");
if(parent.hasClass('dropdown') || parent.hasClass('flyout')) {
event.preventDefault();
$(parent).siblings().attr("id", "");
var isActive = (parent.attr("id") == "active" ? true : false);
(isActive ? $(parent).attr("id", "") : $(parent).attr("id", "active"));
}
});
};
});
This works fine with the iPhone, but on Android it gets screwed. I'm at a total loss, any ideas?
By, "gets screwed" I mean nothing happens on Android when you try to click a link.
I found the problem. I was using a CSS transition that for some reason Android wasn't keeping up with.
I am using bootstrap typeahead.
It depends on this jQuery code to work:
el.on('keyup', doSomething() )
On Chrome on Windows it works fine. On Chrome on Android it doesn't. The keyup event is never fired. The element to which it is bound definitely has the focus.
This appears to be a recent development.
Chrome 28.0.1500.64
Android 4.1.2 SGP321 Build/10.1.1.A.1.307
Thanks
--Justin Wyllie
I came across this same problem earlier today. How can android chrome not support these key events! I assume you've found a workaround by now, but here's a fix that I came up with for now.
function newKeyUpDown(originalFunction, eventType) {
return function() {
if ("ontouchstart" in document.documentElement) { // if it's a touch device, or test here specifically for android chrome
var $element = $(this), $input = null;
if (/input/i.test($element.prop('tagName')))
$input = $element;
else if ($('input', $element).size() > 0)
$input = $($('input', $element).get(0));
if ($input) {
var currentVal = $input.val(), checkInterval = null;
$input.focus(function(e) {
clearInterval(checkInterval);
checkInterval = setInterval(function() {
if ($input.val() != currentVal) {
var event = jQuery.Event(eventType);
currentVal = $input.val();
event.which = event.keyCode = (currentVal && currentVal.length > 0) ? currentVal.charCodeAt(currentVal.length - 1) : '';
$input.trigger(event);
}
}, 30);
});
$input.blur(function() {
clearInterval(checkInterval);
});
}
}
return originalFunction.apply(this, arguments);
}
}
$.fn.keyup = newKeyUpDown($.fn.keyup, 'keyup');
$.fn.keydown = newKeyUpDown($.fn.keydown, 'keydown');
Sorry to say this but keyup/keydown events do not work for chrome browser in android.
There are other people who have reported this issue(Here and Here) from last 1 year and its not fixed yet. so it's better for developers to avoid using these events till it gets fixed.
I have noticed that with the update from android 4.0 to 4.1, there is a change as to css transition prefix in the stock browser & webView
Basically, both "transition" and "webkitTrantion" are defiend.
Modernizr.prefixed("transition") returns webkitTrantion on android 4.0
Modernizr.prefixed("transition") returns trantion on android 4.1
However, as to transition end event name, "transitionend" event is not defined / does not work. you still need to use the webkit specific "webkitTransitionEnd" event name
QUESTION: I cannot find any documentation on this change, and thus are not certain how to proceed... can anyone shed some light on this? any suggestions or links to docs woudl be greatly appreciated!
TO REPRODUCE:
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'OTransition':'oTransitionEnd',
'MSTransition':'msTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd',
'transition':'transitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
alert (transitions[t]);
}
}
}
The code above, will result in just one popup showing up on android 4.0, and 2 popups for android 4.1 since on 4.1, both "transition" and "webkitTransition" as valid
I had a similar problem where Chrome on desktop and Android on Samsung devices would report another event name than what they actually used. The only way I can think of that would find what they are actually using is by triggering an event, set up several different event listeners, and see which one was triggered. The code below (from this gist) essentially does this and sets Modernizr.transitionEnd to be that eventname.
var $M = window.Modernizr
var _ = window._ // underscore.js
// Defines prefixed versions of the
// transitionEnd event handler
transitionFinishedEvents = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'msTransitionEnd',
'transition' : 'transitionEnd'
};
// Feature detect actual transitionEnd keyword by triggering an event
window.setTimeout(function () {
var div = document.createElement('div');
div.id = "my-transition-test";
div.style.position = 'absolute';
div.style.zIndex = -10;
div.style.bottom = '-1000px';
div.style.height = '100px';
div.style.width = '100px';
div.style.background = 'yellow';
div.style.display = 'hidden';
window.document.body.appendChild(div);
$('#my-transition-test').one(_.values(transitionFinishedEvents).join(" "), function (e) {
if ($M.transitionFinishedEvent !== e.type) {
window.console.warn("Changing misconfigured Modernizr.transitionFinishedEvent to " + e.type + ". (Was " + $M.transitionFinishedEvent + ")");
$M.transitionFinishedEvent = e.type;
}
window.document.body.removeChild(div);
});
window.setTimeout(function () {
div.style[$M.prefixed('transition')] = '0.1s';
div.style[$M.prefixed('transform')] = 'translate3d( 100px,0,0)';
}, 25);
}, 25);
Afterwards you can easily set up an event listener for transitionEnd that will work on all platforms (that has CSS3 transitions):
$("#fooBar").on($M.transitionEnd, function() {
// do something clever
}
The code has dependencies on underscore.js and jQuery, but can easily be turned into vanilla js.
Relevant links for people affected by this:
[Modernizr]Unprefixed version of 'transition' and 'transform' incorrectly returned for Android 4.1.1 (Samsung Note II)
[Leaflet] Freeze on Android 4.1.1 + Samsung Galaxy Note II