Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
There is no issue like this present in the latest release of our plugin (6.6.1.), so unfortunately it is most likely a conflict problem on your installation or a server configuration issue. To start troubleshooting please try to temporary disable other plugins and switch to a default theme to see if that solves the issue. Please also check the LayerSlider System Status, located on the WP sidebar for any related error messages that could provide more information.
System Status is without errors, everything fine. My installation uses jquery 1.12.4, is this version suitable with layerslider? I will check with a clean installation as fast as I can, and let you know the results.
Well, I took my time to make a fast installation with no plugin activated except of layerslider, with wordpresstheme twentyseventeen activated and a prober systemstatus as shown in layerslider system status panel
Just to be sure we speak about the same thing (tested with your template layerslider v6):
The first slide, named welcome, has a layer called modal. When I click on it in preview-window I get the dotted lines, I can drag and resize it. So far so good.
Now I change the style-property (style-panel) and give it an transform rotate 4° (transform-section in style-panel). With this transformation active I still can select it in the layer-list, but when I click on it in preview-window, there are no dotted lines shown anymore, I can't drag it anymore, I can't resize it anymore.
Thank you for the feedback. Is there a way you could give us access - in form of a temporary WP login - to one of these installations, where we can check and test this problem ?
I've logged in and tested this, but couldn't reproduce the issue on my end. Even after applying transitions on the layer and resizing I was still able to grab it and move it. Please note that there are multiple layers stacked on each other in that slide. And you can only grab the ones that are currently on top of the others. So when other layers are over the modal layer at that moment (for example the Gradient) you cannot select it, until you click on it in the layers list.
Thank you for your reply Attila, and sorry, but that cannot be possible. I tested it under Windows 10 with actual Chrome and Firefox and I definitely have this issue. What could be the point is, that you are speaking about transitions, I'm speaking about transformations.
Therefore step by step, I hope you try it again for me:
I open the slide called welcome. I select by mouse the modal layer, get the dotted selection-lines and can resize it or drag it. I select the modal layer in the layer-panel, get the dotted selection-lines and can resize it or drag it. With selected modal-layer I go to style-panel of this layer and give it in the titeld Transforms | Between Transitions-Section under the input-field named Rotate any rotation, e.g. 4 ° The white Modal-Box turns now 4° If I select the modal layer after this transformation again, it doesn't matter if I do it via mouse or via layer-panel, the dotted selection-lines doesn't appear and I can't drag and resize it anymore.
Please don't tell me, that you can't repoduce this ;)
I attached you a screencast without sound, but I think with that you can repoduce the behaviour.
Thank you for the feedback. I was able to reproduce it now. My colleagues and I will look into this to see if we can find anything, and get back to you.
I've confirmed with the dev team that this is the supposed behavior of the transformation effects. The current form of web standards would make it very hard to keep the same interaction real-time with the transformed elements. So at the moment, by appling transformations (rotate, scale, skew, etc), the plugin will disable a couple of functions and the selection will disappear in the preview window for that layer.
Regardless of this, every option (resize, replace, etc) can still be used. But you have to apply them manually in the Styles tab, instead of using drag and drop.
Nevertheless it’s a surprising answer. A transformed DOM-element is still a normal DOM-element, not more, not less. It’s hard to follow the explanation of your dev-team, as long as I can easily change position, size, whatever in normal dev-tools of any browser. The dev-tools are cooking with js as well, so what?
Simply out of curiosity, where exactly are the difficulties to implement that?
What you can do in the browser's DevTools is basically the same when you manually enter the values under the Styles tab of a layer. This "limitation" of transformed elements only affects drag and drop interactions, it does not take away any capabilities. Sliders on the front-end behaves the same, every animation and all your settings taking effect as you would expect. The admin editor and live preview also handles all your settings, only the selection is hidden.
While there are ways to overcome this behavior, we saw it's best to leave it for a future improvement. The complication is due to multiple selection, editor zoom levels, changing axes, etc. Transformed elements are rendered on the GPU independently from the rest of the page as a floating layer, and they behave differently in many ways than non-transformed elements. The most obvious case is positions, transformed elements appear differently than the browser reported values. Since their orientation can change in 3D space, a dragging operation might result jumps or move them slightly off course. Consider the fact that each axis of each transform type can be set individually, this results several factors to watch for. The editor zoom feature uses scale, which makes the browser to report slightly off values that we also need to account for. Multiple selection where layers in the group behaves differently, the browser reports varying values, and the layers need to be in respect with each other makes this even harder to track. There are simply too many factors to account for and incorporate into a single equation. This is definitely something we plan to improve in a future update. Whenever we can, we do our best to overcome these obstacles and make the experience as seamless as possible.
Hi John, thanks a lot for your fundamental explanation and the time you took for it. I appreciate this a lot. Sounds indeed much more complicated then I thought.
But good to know, that you plan this feature for the future.
Is it normal, that I can't select an layer with my mouse, after I applied a transformation in style panel to it or is this a bug?
Hello chapolote,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
There is no issue like this present in the latest release of our plugin (6.6.1.), so unfortunately it is most likely a conflict problem on your installation or a server configuration issue.
To start troubleshooting please try to temporary disable other plugins and switch to a default theme to see if that solves the issue.
Please also check the LayerSlider System Status, located on the WP sidebar for any related error messages that could provide more information.
System Status is without errors, everything fine. My installation uses jquery 1.12.4, is this version suitable with layerslider? I will check with a clean installation as fast as I can, and let you know the results.
Regards, Joe
Yes, that jQuery version should be sufficient. Please let us know of the results.
Modified, see next post ;)
Well, I took my time to make a fast installation with no plugin activated except of layerslider, with wordpresstheme twentyseventeen activated and a prober systemstatus as shown in layerslider system status panel
Just to be sure we speak about the same thing (tested with your template layerslider v6):
The first slide, named welcome, has a layer called modal. When I click on it in preview-window I get the dotted lines, I can drag and resize it. So far so good.
Now I change the style-property (style-panel) and give it an transform rotate 4° (transform-section in style-panel). With this transformation active I still can select it in the layer-list, but when I click on it in preview-window, there are no dotted lines shown anymore, I can't drag it anymore, I can't resize it anymore.
Regards, Joe
Thank you for the feedback. Is there a way you could give us access - in form of a temporary WP login - to one of these installations, where we can check and test this problem ?
I've logged in and tested this, but couldn't reproduce the issue on my end. Even after applying transitions on the layer and resizing I was still able to grab it and move it. Please note that there are multiple layers stacked on each other in that slide. And you can only grab the ones that are currently on top of the others. So when other layers are over the modal layer at that moment (for example the Gradient) you cannot select it, until you click on it in the layers list.
Thank you for your reply Attila, and sorry, but that cannot be possible. I tested it under Windows 10 with actual Chrome and Firefox and I definitely have this issue. What could be the point is, that you are speaking about transitions, I'm speaking about transformations.
Therefore step by step, I hope you try it again for me:
I open the slide called welcome.
I select by mouse the modal layer, get the dotted selection-lines and can resize it or drag it.
I select the modal layer in the layer-panel, get the dotted selection-lines and can resize it or drag it.
With selected modal-layer I go to style-panel of this layer and give it in the titeld Transforms | Between Transitions-Section under the input-field named Rotate any rotation, e.g. 4 °
The white Modal-Box turns now 4°
If I select the modal layer after this transformation again, it doesn't matter if I do it via mouse or via layer-panel, the dotted selection-lines doesn't appear and I can't drag and resize it anymore.
Please don't tell me, that you can't repoduce this ;)
I attached you a screencast without sound, but I think with that you can repoduce the behaviour.
Regards, Joe
Thank you for the feedback. I was able to reproduce it now. My colleagues and I will look into this to see if we can find anything, and get back to you.
Hello,
I've confirmed with the dev team that this is the supposed behavior of the transformation effects. The current form of web standards would make it very hard to keep the same interaction real-time with the transformed elements. So at the moment, by appling transformations (rotate, scale, skew, etc), the plugin will disable a couple of functions and the selection will disappear in the preview window for that layer.
Regardless of this, every option (resize, replace, etc) can still be used. But you have to apply them manually in the Styles tab, instead of using drag and drop.
Sorry for the misunderstanding.
Thank you, Attila.
Nevertheless it’s a surprising answer. A transformed DOM-element is still a normal DOM-element, not more, not less. It’s hard to follow the explanation of your dev-team, as long as I can easily change position, size, whatever in normal dev-tools of any browser. The dev-tools are cooking with js as well, so what?
Simply out of curiosity, where exactly are the difficulties to implement that?
Kind regards, Joe
Hi Joe,
I'm John from the Kreatura Dev Team.
What you can do in the browser's DevTools is basically the same when you manually enter the values under the Styles tab of a layer. This "limitation" of transformed elements only affects drag and drop interactions, it does not take away any capabilities. Sliders on the front-end behaves the same, every animation and all your settings taking effect as you would expect. The admin editor and live preview also handles all your settings, only the selection is hidden.
While there are ways to overcome this behavior, we saw it's best to leave it for a future improvement. The complication is due to multiple selection, editor zoom levels, changing axes, etc. Transformed elements are rendered on the GPU independently from the rest of the page as a floating layer, and they behave differently in many ways than non-transformed elements. The most obvious case is positions, transformed elements appear differently than the browser reported values. Since their orientation can change in 3D space, a dragging operation might result jumps or move them slightly off course. Consider the fact that each axis of each transform type can be set individually, this results several factors to watch for. The editor zoom feature uses scale, which makes the browser to report slightly off values that we also need to account for. Multiple selection where layers in the group behaves differently, the browser reports varying values, and the layers need to be in respect with each other makes this even harder to track. There are simply too many factors to account for and incorporate into a single equation. This is definitely something we plan to improve in a future update. Whenever we can, we do our best to overcome these obstacles and make the experience as seamless as possible.
Best Regards,
John | Kreatura Dev Team
Hi John, thanks a lot for your fundamental explanation and the time you took for it. I appreciate this a lot. Sounds indeed much more complicated then I thought.
But good to know, that you plan this feature for the future.
Kind regards, Joe