Javascript app laggy scroll in IOS7 devices - javascript

I've been using Chaps Link Timeline and it works well on all devices except on apple devices running iOS7. The problem is in the new iOS that is causing the lag. Basically scrolling (swiping left/right) on timeline is very laggy. Tested on both safari and chrome on an iPad.
How can I fix lag in new iOS?
Timeline:
https://github.com/almende/chap-links-library/tree/master/js/src/timeline
Github Issue:
https://github.com/almende/chap-links-library/issues/239
Online Demo:
http://almende.github.io/chap-links-library/js/timeline/examples/example01_basis.html
More Demos:
http://almende.github.io/chap-links-library/timeline.html

Related

What work arounds exist to make Aframe VR work on an iPhone or other ISO mobile device?

I am running:
Aframe 1.3.0
iPhone 8 running IOS 15.5
MacBook Pro (Mid 2012) running macOS Catalina 10.15.7
I have an aframe webpage that loads in a simple, test environment.
I am able to view the webpage fine (including VR mode) on my MacBook, although there is some lag when trying to run it on Safari.
On my iPhone, I cannot view VR mode at all. The regular view works fine, and I am able to drag to move my camera and look around.
When I try to enter VR mode, I get prompted to place my phone into my Google Cardboard and VR does not work. It will get stuck on a white screen.
I understand that there have been issues with IOS and webXR support in the past and people seem to be encountering similar issues to mine. The fixes suggested in those links also did not work for me.
I also get the following errors in the iPhone web inspector:
TypeError: scope.dispatchEvent is not a function. (In 'scope.dispatchEvent({
type: 'sessionstart'
})', 'scope.dispatchEvent' is undefined)
TypeError: undefined is not an object (evaluating 'camera.near')
I'd really like to make the VR work on both Android and Apple devices. Are there any work arounds to make Aframe VR work on IOS mobile devices?
I ended up using an older version of A-Frame.
The newest version of A-Frame doesn't run in VR mode on IOS; version 1.2.0 does. You can identify what OS the webpage is using and change the A-Frame version based on this. However, version 1.2.0 has different bugs and sometimes gives different behavior than 1.3.0. I had to make other changes on top of the A-Frame version to ensure the experience was consistent on both devices.

Website is not scrolling on Windows Touch Devices

I've developed a one-page website using Bootstrap. http://cpproject.co.uk/social2/
The website works totally fine on all other devices, responsive and also you can scroll.
However, you can't scroll using the touch screen on Windows Devices and Laptops which have touch screen and using the IE Browser. (Works fine on Chrome on a Touch Laptop)
I can't find anything similar to this. I would really appreciate any help or fixes.
Thanks a lot in advance.

fullpage.js + iscroll.js libraries not working corectly only on iphones

It seems that fullpage.js can't detect the height of the browser on iphone devices. Any tips how to fix this? It works ok on android devices.
Here is the url:
vinarijapantic.com/apps/onePage/

Click/tap delay for web app on tablets

I made a simple little "wack-a-mole"-style game for my kids with JavaScript and HTML, and it performs exactly as it should on a PC. As soon as you tap the animal (penguin, in this case) it shows as being wacked. I'm using a window.setTimeout to try to time the images.
However, on tablets (tried on an iPad and an iPad Mini 2) there is a delay when tapping, so it isn't always counted correctly. I've tried it on a Windows 10 PC with touch screen and it functions as expected, but on the iPads it always has a small delay, but enough to throw off the gameplay.
Is there any way to account for this delay on mobile devices? I hesitate to change the timing of all of the images (the penguin poking its head up, then coming all the way up, then going back into its hole) because it works just like it should on Windows PCs.
I tested it in both Chrome and Safari on the iPad and iPad Mini 2, with the same results.
Thanks in advance.

Chart.js disappears on Android

I am using Chart.js ( the branch with tooltips ) to display some charts and everything is good on Chrome on PC.
This problem only appears on Android (tested it on KitKat, Nexus 7, Chrome 31): after the charts complete the loading animations they are not rendered corectly anymore ( only part of the grid is beng shown and no data ).
Here is the page I have tested on: http://files.tips4design.com/wordpress/?p=7
As you can see the Pie chart is the only one displayed correctly after animation is complete.
I have tested this page on iOS7 (iPhone 4) and everything went ok.
LE: The same bug also appears on Nexus 7 on Opera.
I probe it in Chrome/Firefox/Native Browser in Nexus 5 with android Kit kat and goes nice.
It seems a render memory problem of opera. (I detect some bad memory handle in opera mobile with other canvas animation like highcharts)
Regards.

Categories