HTML5 video frame by frame advance and rewind problem on iPad - javascript

I have ran into a problem trying to do frame by frame advance with html5 video on the iPad.
I have a test page up here
http://playgr8sports.com/ipad/videotest.html
With the back and forward buttons using the html 5 video tag.
This works great exactly how it should do in Chrome. It jumps through at 0.03 sec per click.
But when I try it on the iPad, it jumps random chucks of seconds and is no longer frame by frame.
All I can find is that it has something to do with the iPad not handling "currentTime" in javascript very well.
I cannot find any work around. Any help or insights would be greatly appreciated.
Thanks

It looks like this is a bug with the current 4.2 SDK. I have 4.3 Beta installed on my iPad and it works great on here. There are a few issues I've seen thus far with the 4.2 browser that are fixed in 4.3
Also add this to your page:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
will help limit the zooming in and out deal when clicking on the links and not quite hitting them.
I'll check for any work arounds, but seeing as it's a version issue, might not be any..

Related

Content not showing well on mobile

I'm having issues with the web I'm working on mobile devices. In desktop looks perfect, also I resized the browser to the lowest width and still looks great, but on mobile is showing as a white big box to the right, like if is another content. Mobile View
As I said before on desktop it looks perfect, even if I resize the browser to the lowest. Desktop View
Honestly, I don't know what the problem is, I would appreciate the help a lot.
I found the issue, was this line <meta name="viewport" content="width=device-width, initial-scale=1.0">.
I changed the number of the inital-scale to 0.5 and it worked perfect, i dont understand why. I would appreciate if someone explane me the function of the initial-scale.
Thanks.

Page scroll menu not working Firefox and Chrome

I have created my first microsite with Umbraco/ASP.NET at www.surreyhillsmt.co.uk. I started with a bootstrap theme called Agency from startbootstrap.com, and find that the smooth page scrolling from my menu works on the Edge browser and both Safari and Firefox on an iPhone/iPad.
However, smooth page scrolling does not work on either Firefox or Chrome on a PC (fully updated Windows 10, and both Firefox and Chrome installed within last couple of days). This problem is not exhibited by the static bootstrap theme that I used.
I would really appreciate any help. By way of background I am competent with C# and okay with HTML/CSS. I have zero knowledge of javascript and the like.
This is no longer a problem. Oddly this was fixed with the passage of time. I guess it was a caching related issue.

Website loading times out, images are missing, load half-way, and sometimes appear in wrong places

I've ran into this very peculiar issue where the wordpress website I am working on (Click to see) , looks and works great on all browsers except Safari on iPhone.
The site seems to be loading and times out half way. Sometimes images appear in wrong places, sometimes they're cut off mid-image. We've tested the site on OSX, Windows, in Chrome, Safari, Firefox, and iOS Chrome and it appears to be working great. The interesting thing is that this problem seems to be exclusive to Mobile Safari, consistently across multiple devices from different networks.
Here's are a few examples of what we're seeing:
In this photo should be a background image and a menu icon in the nav.
And in this photo what is that image doing in there? There should be another logo and these should be scrolling right to left instead of being displayed vertically.
And in this one Some images don't load at all and some don't load all the way.
And also in this one same portion of the website as above, except nice and crisp, how it should look. This was using iOS Chrome.
We tried isolating the issue by switching over to the default Twenty Fifteen wordpress theme, where we created an image heavy blog post (without any widgets), and the issue persisted.
We've been clearing browser caches and using W3 Total Cache to clear WP cache, but no luck.
Also had the website host, Namecheap, reset the server configs, just in case that would solve the issue, but, alas, no luck either.
Has anyone run into this bizarre issue in the past? Any ideas what else we could try?
Thank you so much in advance!

Phonegap scrolling issues on android 5

We are developing an app using Phonegap/Javascript.
Scrolling used to work fine, until we tried the new Android 5.
The page does not scroll down, unless you swipe many times. Then it is stuck in the other position..
Can't find anyone with this problem!
We are using just simple divs with content that is taller than the screen. Works fine on Android <5 or iOS.
Any ideas?
This is what finally solved the problem, along with simplifying properties, etc.:
Hammer.defaults.stop_browser_behavior.touchAction = 'pan-y';
It was an issue with the hammer.js plugin with touchAction property.
This affects some browsers - and apparently also Android 5 (but doesn't affect Android 4.* when using PhoneGap).
Not as simple as it seems, more details here:
https://github.com/hammerjs/hammer.js/wiki/How-to-fix-Chrome-35--and-IE10--scrolling-(touch-action)

Safari on iPhone and iPad crashes while zooming (double-tap and pinch)

I have a problem with a Wordpress-run website: http://www.igorlipinski.com - Safari freezes and eventually crashes on iOS devices while using the zoom option, either double tap or pinch to zoom option. It looks and works very well on desktop browsers. I can't quite locate the problem... any thoughts? Thanks in advance!
UPDATE: I disabled javascript on my iPhone and the site worked beautifully, so at least I know where to look now! I would appreciate if anyone had a direct solution for this particular site, but I will work on it in the meantime.
I have faced similar kind of issue. Found issue with canvas drawing.
Basically there is one issue with canvas drawing. when we draw or erase something using canvas's methods like drawRect(), lineTo(), moveTo(), etc... it will create extra layer (like pixels on canvas) which causes memory leakage issue in safari browser for ipads/mobiles.
I am still looking for solution/alternative for memory leakage while using canvas.
Hope this will help you find any clue related to your project.

Categories

Resources