HTML canvas not scrolling window on Android Chrome - javascript

I have a problem, trying to scroll window while touching mobile canvas. This only happens for Android Chrome, and works on ios Chrome and default mobile web browsers.
I don't know where the problem is because of getting the canvas applied to a surface by a 3rd party client, and i'm not able to modify that code.
Any suggestion?
Defining an own scroll function would be one.

I found the reason for this, and no longer need a answer.
The canvas had the style attribute touch-action: none.

Related

Android Native Browser duplicating HTML5 canvas (fine in chrome)

This is a weird issue that I am only experiencing on a Native browser on Samsung Galaxy Tab 2 and Galaxy S2 in the native browser.
This has also been tested on other android phones and tablets such as the Nexus 7 & Galaxy S4 but their native browser is chrome, so it appears fine. This issue is also not present on any IOS browsers, Windows Desktop browsers or Mac Desktop browsers.
It's almost asif the webpage is loaded twice ontop of itself!
As there is a duplicate canvas element, that updates as the main canvas does.
Here it appears asthough it only happens when rotated in landscape mode, but I beleive that in portrait mode, the canvas' are perfectly aligned over the top.
What is even weirder, the menu button that you see is a toggle button, tap to open menu, tap to close menu. On this device when you tap it, it opens and closes instantly. the same happens for the mute button toggle.
I'm completely at a loss.
I have done some javascript debugging throwing in a few alerts here and there, and the initialisation functions that create references to the canvas and so on are only called once.
I have read and heard about hardware acceleration causing issues, but solutions i've potentially found are only relative to building native apps! not HTML5 Canvas webpages.
Any insight on this could be would be great!
Thanks in advance.
--EDIT
I also put in this test alert(document.getElementsByTagName('canvas').length); to see if there was 2 canvas in the DOM but it returns 1!
I ran into this same issue. I was able to fix this by running the following code after making a change to my canvas:
// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {
// Tweak the canvas opacity, causing it to redraw
$('canvas').css('opacity', '0.99');
// Set the canvas opacity back to normal after 5ms
setTimeout(function() {
$('canvas').css('opacity', '1');
}, 5);
}
By tweaking the opacity, this forced the canvas to redraw and removed the duplicate shapes. It's a dumb fix but it works. Hopefully this helps someone.
Also you may look at this collections of such tips: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/
For double canvas issue there is a bug logged https://code.google.com/p/android/issues/detail?id=35474 you may want to check suggested solutions.
In my case this issue appeared only if I had Force GPU rendering enabled.
Issue usually appears if you have some parent element for canvas that has CSS overflow: hidden
remove overflow property from all canvas parents,probably we don’t need this property on touch devices:
$("canvas").parents("*").css("overflow", "visible");
It is well explained at http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

Reset / change zoom via javascript on Mobile Safari Web App

This issue has been discussed here before, however, I don't get the suggested solution to work.
I want to change the scale / zoom of a webpage on a mobile safari via JS. The solution suggested by
How can I use JavaScript to set the zoom level on mobile safari?
Mobile Safari Web App Zoom issue
Is is possible to change page zoom in Mobile Safari via Javascript?
is to set the "viewport" meta tag.
I tried this, but the scale is not changed.
$('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable:no');
When does safari interpret the viewport setting? Only when loading a page or also when the value is changed programmatically (what I would expect with repsect to the answers of the questions mentioned above)?
Did this behaviour change in some iOS version?
BTW: Where can a find a list of recognized arguments for viewport?
Many thanks for any suggestion!

Mouse X/Y detection within Flash stage not working Moz & Webkit on PC

I am trying in vain to get this Flash based navigational item working in FF and Chrome on PC. It's all good on Mac and it's just fine using IE 7 or 8 on PC.
The nav item consists of a ball that "follows" the cursor in relation to where it is on the page. JS is used to gather the X/Y info from off the Flash stage and create vars to be used by the Flash movie to move the "orb" in relation to the cursor position. For some reason, FF and Chrome on PC fall short here.
I've tried everything from setting the Flash movie to "opaque" and positioning a transparent DIV over it, all to no avail.
Any thoughts on this? Has anyone encountered something like this?
Example here:
http://anthrograph.com/yarbyarb/thang/
We were given the compiled SWF with the listeners setup, but as of now, I do not have access to the FLA to make changes.
Thank you!
i tried in chrome and firefox, when mouse is on html part, positioning is working, while mouse is on flash it is not working.
if i understand, easiest solution is for window mode, you should make a displayObject, a sprite and set it to belove everything else with alpha = 0, with this you can set window mode anything you like.
other then, you should add Listener to MouseLeave and MouseMove to detect when listen javascript or actionscript.
there is another error, you should mask your buttons that right side. they are under other graphic but mouse_over is working when it should not. For this use ROLL_OVER instead of MOUSE_OVER.

HTML5 Canvas on Android Phones - Redraw and Highlight Issues

I am having a redraw issue, when you are scrolling the canvas will not redraw until you release your touch. The problem with that is I depend on "ontouchmove" to move my character around. So until the touch is release, the canvas will not redraw.
Another problem is when ever the canvas is touched it is focus, or activated. It develops a focus ring around it. I tried setting both the :focus and :active pseudo's borders and outlines to nothing. Also I saw "drawFocusRing" for the context of the canvas, however that didn't seem to resolve the issue.
Currently I tested on Android stock browser 2.2 (MyTouch 3G)
I believe the orange focus ring is more in relation to the WebView you are using to view the canvas maybe? I know I had a similar issue with js drawing on a canvas.
myWebView.setFocusable(false)
myWebView.setFocusableInTouchMode(false)
Should solve the focus problem.
I don't know about Android specifically, but in mobile Safari you can prevent scrolling using the event.preventDefault() method. If your application requires scrolling, it might be possible to implement your own scrolling mechanism whilst still preventing the default behaviour, maybe by combining touch events with CSS positioning on a page wrapper div?

Flash: Using mouse wheel events in full screen mode (Windows and Mac)

Although Flash has a mouse wheel event (MouseEvent.MOUSE_WHEEL), it comes with quite a few problems.
The first is that the event is not yet supported on the Mac. So there are a bunch of solutions, all of which (basically) capture the mousewheel (or DOMMouseScroll) event in javascript and pass it into the flash app. Luckily, under all the Mac browsers I tested, this also works when flash is in fullscreen mode.
Problem 2 is that flash ignores mouse wheel events with small "deltas". For example, Microsoft's IntelliPoint Mice with "Smooth Scroll" causes this problem. A solution to this is the same as the solution for the mac... i.e. capture the javascript mouse wheel event in the browser and pass it to the app. The issue is that of the browsers in windows that I tested (firefox, ie, safari, and chrome), they don't seem to capture this event when flash is in full screen mode. Does anyone know why or how to fix that?
I currently have a hybrid solution that always takes events from javascript (in non-fullscreen or fullscreen mode) except when it's in fullscreen mode on Windows (at which point it takes them from the flash mousewheel event). So the only times it fails is in full screen mode on Windows with a mouse that has small deltas. Anyone have a full solution? Or just a better one?
It's a know issue on adobe's JIRA. You need to wait'em to fix it, or use another event instead MouseEvent.MOUSE_WHEEL. It's not working on windows because the flash player implementation is completly different in windows from mac and linux. Mac and Linux uses GTK to implement the plugin Handle. On windows it uses a Win32API Common HWND, which steal focus on full screen mode, causing the non dispatching of scroll events on the browser. On Mac and Linux, GTK just stretch the plugin size into desktop's size, and don't do a real fullscreen. It's a GTK behavior inside these systems. Nothing can be done.
Your solution is one of the best. Only one is better - don't use mouse wheel :(
Adobe should do something with it (and with support for other controllers).
MouseEvent.MOUSE_WHEEL seems to work fine on mac since Gala beta and 10.1 final. i can trigger mouse wheel events using the magic mouse and track pad in both Safari and Chrome.
Pixelbreaker's MacMouseWheel has given me successful fullscreen scrolling on a mac, but I haven't used it in a while (on Safari 5 for example).
The downside is that it captures events for the whole page, so you will lose scrolling for the HTML even if the flash element is only a little box on the screen.
But you could basically switch between what you've built already, and what he's using in the macmousewheel.js when you've enabled full screen.
Hope that helps, good luck.
You could try using the simple AS3 class MacMouseWheelHandler at http://blog.earthbrowser.com/2009/01/simple-solution-for-mousewheel-events.html which makes it so you don't have to integrate with Javascrpt. It injects the Javascript right from Actionscript.

Categories