Develop Reference

Ag-charts canvas zoom bug

I would like to comment on my problem in case someone has an idea of what it is due to or proposes an alternative solution.
Currently I have a large ag-charts graph that does not fit and it is always necessary to scroll to be able to see it in its entirety but when scrolling the axes are not maintained, so I resorted to the alternative of cloning the graph canvas twice to generate 2 new canvas clipped with "position:fixed" so that they always stay at the ends.
So far there is no problem except that if the browser zoom and/or the windows scale differs from 100%, it affects the cropping of said canvas in an inconsistent way. I was not able to get a rule of 3 to apply the correct zoom multiplier ( with ctx.drawImage() ) due to its inconsistency.
The error stops happening when you test it with a normal canvas that has not been generated by ag-charts
Here I have a very simple Live Demo to test it.
(To reproduce the bug you need to have the zoom applied before the generation of the graph).
I also tried to get the zoom level using:
(Math.round(window.devicePixelRatio*100)/100, -1);
and applying the correspondent ratio using:
.drawImage(canvas,0, 0, canvas.width*ratio, canvas.height*ratio);
but it only works in specific percentages of zoom

jQuery UI Touch Punch - slider on mobile devices is not accurate when the page is zoomed

I try to explain my problem and behavior.
Enter touchpunch vertical slider demo-page (http://touchpunch.furf.com/content.php?/slider/vertical-slider) on your smartphone. Zoom to the max and touch somewhere one the slider - the result is that the handler moves but not to the point you were touched but higher. The distance between touch and handler position after touch is bigger when the zoom is bigger and opposite - on default 100% view everything is ok. I notice it in my project and this is a problem becouse on mobile devices zooming site is common and then slider got crazy. Do you have any ideas guys how to resolve this?

Question is rather old, but today I stumbled upon the same problem and I decided to share the solution I've found ;)
What I've done is:
added position: relative on the container
modified touch-punch plugin, adding scroll offset to clientX and clientY coordinates of simulated mouse event.
Here is fork with updated code, also added some test cases you can check out in live browser:
https://github.com/Kocik/jquery-ui-touch-punch-zoom-fork

Zooming SVG is blury or pixelated, not sharp

vI know to some extent this is a known issue that has been asked here but never answered, but I'm hoping for some additional insight.
I have a simple SVG image in a div on a web page. I want to be able to zoom the image using pinch gestures and have the SVG render sharply. It doesn't need to be sharp during the zoom, but should be sharp after the gesture is complete.
I'm doing my testing on a Windows 8.1 computer with a touch monitor, on an iPad, and on an old Android Galaxy Tab. On the main computer, I'm using IE11 and Chrome. For handling touch gestures, I'm using Hammer.js. I'm doing the zooming by modifying the transform CSS using the jQuery css() function (I'm setting scale3d and translate3d).
IE11 on my computer works exactly like I would like it to. It keeps the SVG image sharp throughout the pinch zoom and the image is always sharp regardless of when I set the CSS.
Chrome on my computer always renders the SVG blocky when I am zoomed in using pinch zoom. It is blocky during the zoom and does not get sharp afterwards. If I add a call to zoom the image after the page (x13) is loaded, the image is sharp. If I use a setTimeout() call to reset the zoom and then rezoom the image after the pinch zoom ends, the image is sharp.
On the iPad and Android tablet, the SVG never renders sharply, regardless of when I zoom it in code.
Does anyone have any ideas of how to reliably end up with a sharp rendering of SVG after a pinch-zoom is completed? Does anyone have a better solution? Using the SVG viewBox to zoom and pan during the gesture does not provide good enough performance for our more complex SVG images. I'm thinking of attempting to use the hardware accelerated scale3d/translate3d during the gesture and then attempt to convert this to new SVG viewBox settings afterwards, but this is a challenge and I'm not sure panning will work correctly after this is done. Any pointers or ideas are greatly appreciated.

Having just tried to answer your other SVG Question I will have a try at this one.
Michael Mullany is spot on that GPU translations will never give you a sharp image. This is because the GPU just maps one array of pixels to a new one. Because it has no concept of lines or rectangles the resolution is set by the time the GPU gets the image. The CPU will always struggle to re-render in time for a smooth drag.
What happens to allow some browsers to produce a sharp image is they do clever manipulations like rendering more pixels than they need so some zooming can happen without loss of resolution. These however are completely inconsistent and just not possible to rely on.
The as I see it 'correct' solution is to translate and zoom with hardware accelerated transformations during a pinch or zoom and then to refresh the viewbox with no css transformation when the translation has finished.
Challenges to overcome are
The css transformation will use screen coordinates but the viewBox manipulation will use the SVG coordinate system.
There are browser inconsistencies in both screenCTM and device pixel ratio
limits so that people don't drag or zoom too far need to be calculated in both systems
Pinch centerpoints also need to be calculated in both
To improve performance further the css transforms will be wrapped into updating on the requestAnimationFrame loop.
My working solution is hammerhead2. I am concentrating on desktops and android mobiles first and it seams to be working for them. To simplify the problem zoom is always centered to the screen center. I do however thing this is currently one of the only solutions. Here is an example of it working.

three.js - Help adding pinch zoom to css3d_youtube demo - trackball controls messing up camera position

I'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.
Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.
The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.
I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here
The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.
If it would be more helpful I can remove that condition so it can be seen in a desktop browser.
If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.
I also tried just regular JavaScript gesture events by adding this function:
function onPinch(e) {
move(e.scale)
}
and calling it in an event handler:
`document.body.addEventListener('gestureend', onPinch, false)`
but that was a disaster. The CSS3D objects rendered very slowly.
Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing

Looks like TrackballControls.js has been updated to support touch zoom gestures.
If any one else is having this problem, just get the latest version.
The CSS3D periodic table and youtube examples seem to have been updated too.

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.