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.
Related
I have an app written with Konva.js, and it works really smoothly on both my 13-year-old PC and my wife's iPhone XR - it's just perfect. But whenever I run it on my Xiaomi Redmi 9 Pro and also my older one, Xiaomi Redmi Note 4X in many different browsers including Chrome, Opera and Firefox, it is really slow. I have animations using Konva.Tween and also some draggable nodes, and both of them work unbelievably slowly, FPS seems to be close to zero.
The strangest part is, I tried moving draggable nodes to a separate layer right before the dragging starts, and it doesn't speed up dragging at all, not one bit, at least visually, I didn't measure the actual FPS. So to me it seems like I am facing a limitation of my phone's performance here or there's something else which I do not see.
What is it that might cause the issue?
First, you should run the performance profile on your phone and take a look at what exactly is slow. Konva code execution? Native 2d canvas rendering? Browser layout work?
Also try to experiment with Konva.pixelRatio property https://konvajs.org/docs/performance/All_Performance_Tips.html.
Konva.pixelRatio = 1;
The image may be blurry on HPDI device, but probably it will be good enough. Probably default pixel ratio is too high. You can try different values like 1 or 1.5.
I need to access the iPhone camera and take a screenshot every 10 sec for 40 min.
The methods that I use all work perfectly well on PC and android phones. However, when I execute the code on an iPhone I get the following:
(instead of a stream)
safari asks if the camera can be accessed (yes)
safari take a snap of what's happening and the video stream freezes
This one is one example :
https://www.html5rocks.com/en/tutorials/getusermedia/intro/
(to test - just scroll to the middle part - there will be a test button)
Thank you!
Does anyone know if its possible to use the Twilio Programmable video API correctly from phone to laptop. Every time I make a video call on two laptops everything works fine.
But, if I call from phone to a laptop, the laptop displays a black screen (which should be the stream of the iphone camera). Ive searched everywhere, and do not see anyone facing the same issue. I am using the javascript SDK by the way, and using Safari for the iphone, chrome for the laptop.
So... i'm creating a small game, which is already working on my computer.
Now i want to port it to mobile devices. Well, everything runs fine, except when i want to use the right/left button which i implemented using divs with ontouchstart and ontouchend.
That's because the android browser pauses my javascript/canvas displaying while i'm holding down anything on the screen. When i release the buttons, my playerobject moves to the new location.
tl;dr: How can i disable the function of the android browser, which pauses my rendering while holding down anything on the screen?
Thanks in advance!
(Samsung G Note 2, Android 4.3)
I am currently developing a web application focusing primarily on Chrome 24.01312.57 and IE10. In the former browser, I am experiencing a large amount of lag. However, the latter experiences little to no lag, which is quite opposite to what everyone claims.
To show you the difference, I am recording the screens of my netbook using an iPhone while scrolling down The Chrome Webstore - something Google itself created.
Testing Equipment
2 year old Gateway Netbook -Single Core Intel Atom - 1GB RAM - Win7
iPhone camera (not that great recording solution, but it is quite easy to spot the difference)
Website: https://chrome.google.com/webstore/category/home (I scrolled down quite a bit for both the browsers before starting the test for those worried of AJAX loaded content slowing down the rendering)
Results
Google Chrome 24 (No extensions) scrolling down the Webstore:
http://www.youtube.com/watch?v=njkRqiNJPIY
Internet Explorer (No addons) 10 on the same page:http://www.youtube.com/watch?v=B_E_9OzPers
Note: Look at the mouse cursor and the scroll thumb - on IE10, the mouse is always on the the thumb whereas Chrome, it is all over the place indicating a high latency between mouse movement and the actual rendering.
Bottom Line:
Before I conclude, do realize that these lags on Google Chrome are increasingly magnified as the website becomes more complex and/or the specs go lower. However, IE10 is pushing the FPS quite high even in these conditions. I also did some analysis of the Chrome timeline. In reveals that the FPS drops as you zoom out to the point where rendering takes up to ~900ms per frame (on the Google Webstore) while IE10 is still fluid smooth (and better yet it retains that smoothness on an atom netbook)
As web developers, is there some CSS property/ies that is causing Chrome to render the pages with lag?
Why is Internet Explorer rendering so quickly?
What can be some steps to make Chrome render as quickly as IE10?
PS: Bug Report: http://code.google.com/p/chromium/issues/detail?id=163092 but no recent developments on this currently.
Chrome struggles with painting, especially at high resolutions such as 2560x1440 and above. Many websites such as the Chrome Web Store, Facebook, etc. exhibit significant scroll lag on it. IE10 maintains 120 fps on my monitor while scrolling on these sites.
I just had and fixed a similar issue.
Apparently Chrome isn't too smart about their recalculation of styles, besides that being terribly slow, so I focused on preventing it from recalculating anything.
I added the 'scrolled' class whenever the scroll event was triggered, but if it was already there, Chrome kept recalculating the new styles anyway. When I modified it to be like:
if (!body.hasClass('scrolled')) { body.addClass('scrolled'); }
Chrome suddenly experienced a significant speedup (still no IE or FF, but much better than before)
It's the video card on the Netbook! You will experience similar effect on almost everithing that moves on your screen.
I have a Netbook...
The web you are testing crashed Chrome browser until not long ago...