I have a small web app built on top of fabricjs, with gestures enabled, very similar to the gesture demos on fabricjs tutorial site.
The app draws an image (jpg, 2000x2000) using another image (png, 2500x2500) as a mask.
The web app works flawlessly on desktop PC and in the iPhone; it is slower on Android phones; that's fine, I was expecting this behaviour.
The weird thing is that the same js, on the same device, works much faster under firefox than under chrome.
This behaviour is the same on every android release (tested on android 4.4, 5,x, 6.x) and it's the same on every Android device (tested many, say galaxy note 10.1 2014ed, galaxy note 2, honor 8).
Can you give me any hint? Why chrome, on canvas operations, is consistently slower than firefox?
Thanks!
Related
I'm developing a mobile game which needs WebGL to perform well, however WebGL only works on certain devices.
I have a Nexus 10 tablet updated to the most recent Android Lollipop.
My game uses WebGL when I run it from Chrome, however when I package the game using cordova the game doesn't use WebGL and is very slow. I've tested the behavior on several other devices as well:
WebGL Works:
Samsung Galaxy S5 (4.4.4)
Blackberry Priv (6.0.1)
WebGL Doesn't work
Nexus 10 (5.1.1)
Samsung Galaxy S3 (4.3)
iPad mini 1 (9.3.5)
Samsung Galaxy Tab 3 (4.4.2)
I've also tried using CrossTalk but the app it created never starts. After the splash screen it has black background and nothing happens.
How can I fix or debug the issue that WebGL doesn't work on certain devices?
I managed to make it work, The main reason for not using WebGL is some devices that doesn't have a certain feature in the GPU is by default disable WebGL. The only way to force using WebGL, you will need to use CrossWalk and at same time ignore gpu blacklist.
First I added CrossWalk plugin using the following command:
cordova plugin add cordova-plugin-crosswalk-webview
Then I modified the config.xml to contain this part
<preference name="xwalkCommandLine" value="--ignore-gpu-blacklist" />
Also I signed the APK for release and that made the App work.
Adding this preference forced my Nexus 10 to use WebGL and its super fast.
Also CrossWalk is very fast and made the app work better on my new BlackBerry Priv.
we develop and android app that opens a full screen browser and loads some content. this all works fine excepted this little bug:
only under 4.4.2 (works fine on 10 devices with 4.2, and also tested on 4.4/5) only the text-shadow css feature drops the shadow on the top of the text box instead of behind the text. it fails in our app, also fails in the default browser, but works fine in Chrome or firefox on the same android stick.
as you can see it from the attached screenshot the box shadow works fine.
also this issue is related to kernel 3.0.36+ and works fine on (Nexus7 4.4.2 with) 3.4.
so as we think this will be an issue with the webkit engine, and looking for some solution/workaround
I have developed an application which uses Cordova/Phonegap on Android to display Open Layers 3 maps.
It is quite similar to this project:
https://github.com/netgis/ol3
I have found that the application runs smoothly on the Samsung Note 4 running Kitkat V4.4.4, and runs fine on an old S2 running Jellybean (almost equally well in fact), but it runs terribly slowly on a bran new Galaxy Tab Pro 12.2 running KitKat V4.4.2.
I was wondering if there is any Cordova/Phonegap expert out there who might know why.
The only difference between them that I can see is the version of android! V4.4.4 and V4.4.2.
I have discovered threads on SO which generically say that WebView can be a problem and cause slow performance, but I'm getting great performance on my Note 4, and the S2 runs better than the tablet does using Jellybean.
I'm not sure code would be useful to show here, essentially I have a Cordova Android application with a single HTML document with Open Layers 3 map embedded, that's it.
The problem turns out to lie with WebView, which uses the default Android browser. For some reason this browser restricts CPU support if you're trying to use GPU acceleration (enabled by default), but doesn't provide GPU acceleration itself (it's really strange but true).
Apparently KitKat has this problem prior to Android V4.4.3. So if you're running V4.4.4 you won't encounter this performance problem as it has been fixed (as it uses Chromium instead of the default browser).
Here's one of many references I've found which corroborate this:
https://code.google.com/p/chromium/issues/detail?id=315111
Some devices haven't yet been updated to this level, here are my completely up to date devices:
The tablet uses Android V4.4.2
The S2 uses Android V4.0.2
The Note 4 uses Android V4.4.4
The S2 uses Jelly Bean and is therefore fine, the Note 4 uses the updated KitKat and also runs fine, but the tablet struggles with the application to such an extent it is unusable owing to it being below V4.4.3.
For me, the majority of suggested solutions on SO are to disable hardware acceleration, but these suggestions are unsuitable as my application really does require hardware acceleration to render maps efficiently.
The solution is to take this problem away completely by forcing the use of Chromium irrespective of the OS Version through the use of Crosswalk.
There are plenty of resources I've found to use Cordova in synergy with crosswalk:
https://crosswalk-project.org/documentation/cordova.html
https://blog.nraboy.com/2014/10/use-crosswalk-ionic-framework-android-apps/
Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.
We have developed an application using Sencha Touch and PhoneGap which works flawlessly on iOS devices. It's now time to port the app to the Android OS, which in most cases works great, except when the app is run on a device running Android 2.1.
Images are not scaled properly in this case (they are much larger than they should be). It is likely that I am seeing an example of this bug:
http://code.google.com/p/android/issues/detail?id=5141
There is a work-around posted in the linked forum, but it does not seem to have any effect in my case.
If anybody has further suggestions they would be welcomed!