Right now it looks like I can't advance the page when I have my finger on the canvas. Touching and moving my finger on the yellow areas allow me to advance. However, if I touch any other area something is grabbing my touch requests and not allowing to advance. I have received several tickets from my customers that state my stite is locking their phone but in reality the canvas is grabbing the scroll requests.
My feature request: If a fancy product doesn't have draggable elements then the canvas must release control and allow the page to advance on mobile devices when trying to scroll with a finger.
1 Votes
17 Comments
Sorted by
A
Alex Gruzposted
about 5 years ago
hello, i have a version 3.6.1 but it is still does not working. While the moving designs or pics the canvas is also scrolling on mobile phones, can somebody please help me?
regards
0 Votes
A
Alex Gruzposted
about 5 years ago
hello, i have a version 3.6.1 but it is still does not working. While the moving designs or pics the canvas is also scrolling on mobile phones, can somebody please help me?
regards
0 Votes
rady kalposted
about 6 years ago
Admin
The snippet from R. Blasche will be included in next update (V3.4.3), so you do not need it anymore.
0 Votes
R
R. Blascheposted
about 6 years ago
@Pat Holder
Make sure this script is loaded after all the other scripts (in this case fpd-plus and jquery-fpd) So for WP, add this to your functions.php:
// include after fpd-plus script wp_register_script('myscript', get_stylesheet_directory_uri() . '/js/myscript.js', array('fpd-plus','jquery-fpd'), '1.0', true); wp_enqueue_script('myscript');
Obviously create the file /js/myscript.js in your template dir. and fill it with the snippet i posted before. I hope that works for you.
0 Votes
P
Pat Holderposted
about 6 years ago
R.Blasche could you tell me which js file you placed that code to get over the issue please?
0 Votes
R
R. Blascheposted
about 6 years ago
I completely agree, there should be a proper solution for this if the plugin is meant to run on mobile devices. As i already said its a hack. Anyways: try to uncomment the two lines i commented out. That makes it work better on a few browsers for me.
0 Votes
D
Danny de Kruijkposted
about 6 years ago
Thanks! Your JavaScript code seems to work. It isn't 100% stable though. Sometimes the canvas will scroll when dragging or resizing. It's a lot better then before, but I think the developer needs to fix this on a deeper level to be a fail proof solution.
(Isn't it weird this isn't fixed yet, I guess a lot of people must have this problem).
0 Votes
R
R. Blascheposted
about 6 years ago
Ok, i finally found the setting. But activating it will always disable drag & drop. Is it just me who has this issue?
Anyway here is my hack of a solution:
jQuery( document ).ready( function( $ ) {
// FPD fixes after init
if(window.$selector){
$selector.on('productCreate', function(evt, viewInstance) {
// Drag vs Scroll
var disableScroll = function(){
// don't know why this does not work, but the css fix does
//fancyProductDesigner.currentViewInstance.stage.allowTouchScrolling = false;
$('body').css('overflow','hidden');
};
var enableScroll = function(){
//fancyProductDesigner.currentViewInstance.stage.allowTouchScrolling = true;
$('body').css('overflow','auto');
$('body').css('overflow-x','visible');
};
fancyProductDesigner.currentViewInstance.stage.on('object:moving', disableScroll);
fancyProductDesigner.currentViewInstance.stage.on('object:scaling', disableScroll);
fancyProductDesigner.currentViewInstance.stage.on('object:rotating', disableScroll);
fancyProductDesigner.currentViewInstance.stage.on('mouse:up', enableScroll);
});
}
});
0 Votes
R
R. Blascheposted
over 6 years ago
I cannot scroll even though none of the objects on the stage are Dragable. What is the problem?
0 Votes
A
Aronposted
over 6 years ago
@radykal
I disabled the canvas touch scrolling option to try move elements without scrolling the page (up, down, left and right) and I'm getting this warning from fabric.js:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
_onMouseMove @ fabric.min.js:4
Following the link on the warning I found this:
AddEventListenerOptions defaults passive to false.
With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..
If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.
This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See https://developers.google.com/web/updates/2017/01/scrolling-intervention
I have Chrome 56.0.2924.87
Should I report this on a new ticket?
0 Votes
B
Brentposted
over 6 years ago
This is happening for me too - but only on Android (Galaxy S7), works fine on iPhone
0 Votes
A
Aronposted
over 6 years ago
I agree, dragging an element right now scrolls up and down the page degrading the user experience. Definitely dragging an element should lock the screen on the canvas.
0 Votes
A
Angelo Suerteposted
about 7 years ago
I agree with @JohnReimann. Enable canvas lock automatically when an object is being dragged. Way to go... :D
0 Votes
J
John Reimannposted
about 7 years ago
Hey @radykal,
This is a GREAT improvement! - Just one thing. Is it possible to "lock" the scrolling ONLY while the customer is dragging an image around in an upload zone?
At the moment when customer drags image up or down in an upload zone the whole canvas scroll making it difficult to position image.
Right now it looks like I can't advance the page when I have my finger on the canvas. Touching and moving my finger on the yellow areas allow me to advance. However, if I touch any other area something is grabbing my touch requests and not allowing to advance. I have received several tickets from my customers that state my stite is locking their phone but in reality the canvas is grabbing the scroll requests.
My feature request: If a fancy product doesn't have draggable elements then the canvas must release control and allow the page to advance on mobile devices when trying to scroll with a finger.
1 Votes
17 Comments
Alex Gruz posted about 5 years ago
hello,
i have a version 3.6.1 but it is still does not working. While the moving designs or pics the canvas is also scrolling on mobile phones,
can somebody please help me?
regards
0 Votes
Alex Gruz posted about 5 years ago
hello,
i have a version 3.6.1 but it is still does not working. While the moving designs or pics the canvas is also scrolling on mobile phones,
can somebody please help me?
regards
0 Votes
rady kal posted about 6 years ago Admin
The snippet from R. Blasche will be included in next update (V3.4.3), so you do not need it anymore.
0 Votes
R. Blasche posted about 6 years ago
Make sure this script is loaded after all the other scripts (in this case fpd-plus and jquery-fpd)
So for WP, add this to your functions.php:
// include after fpd-plus script
wp_register_script('myscript', get_stylesheet_directory_uri() . '/js/myscript.js', array('fpd-plus','jquery-fpd'), '1.0', true);
wp_enqueue_script('myscript');
Obviously create the file /js/myscript.js in your template dir. and fill it with the snippet i posted before.
I hope that works for you.
0 Votes
Pat Holder posted about 6 years ago
R.Blasche could you tell me which js file you placed that code to get over the issue please?
0 Votes
R. Blasche posted about 6 years ago
As i already said its a hack. Anyways: try to uncomment the two lines i commented out. That makes it work better on a few browsers for me.
0 Votes
Danny de Kruijk posted about 6 years ago
0 Votes
R. Blasche posted about 6 years ago
Ok, i finally found the setting. But activating it will always disable drag & drop. Is it just me who has this issue?
Anyway here is my hack of a solution:
0 Votes
R. Blasche posted over 6 years ago
I cannot scroll even though none of the objects on the stage are Dragable. What is the problem?
0 Votes
Aron posted over 6 years ago
@radykal
I disabled the canvas touch scrolling option to try move elements without scrolling the page (up, down, left and right) and I'm getting this warning from fabric.js:
Following the link on the warning I found this:
I have Chrome 56.0.2924.87
Should I report this on a new ticket?
0 Votes
Brent posted over 6 years ago
This is happening for me too - but only on Android (Galaxy S7), works fine on iPhone
0 Votes
Aron posted over 6 years ago
I agree, dragging an element right now scrolls up and down the page degrading the user experience. Definitely dragging an element should lock the screen on the canvas.
0 Votes
Angelo Suerte posted about 7 years ago
I agree with @JohnReimann. Enable canvas lock automatically when an object is being dragged. Way to go... :D
0 Votes
John Reimann posted about 7 years ago
Hey @radykal,
This is a GREAT improvement! - Just one thing. Is it possible to "lock" the scrolling ONLY while the customer is dragging an image around in an upload zone?
At the moment when customer drags image up or down in an upload zone the whole canvas scroll making it difficult to position image.
0 Votes
Deniz Var posted about 7 years ago
Great! Can't wait to try it out.
0 Votes
rady kal posted about 7 years ago Admin
Added in 3.1
0 Votes
rady kal posted about 7 years ago Admin
Will be added in next version.
0 Votes
Login or Sign up to post a comment