When developing using Firefox v21, I see that during slide transitions (such as the “Animal World” demo):
- the “old” element slides out correctly
- instead of the “new” element sliding in, I see a blank area
- at the end of the transition, the “new” element suddenly appears.
This might only be a problem in FF, I haven’t tried it in other browsers or devices yet.
The problem has to do with the CSS .dhx_view{overflow:hidden}, and the way DHTMLX Touch uses a CSS3 transform to reposition the item during the transition. (When the transition is over, DHTMLX Touch changes the item’s style to place it in its final position, which is what I’m seeing in stage #3 described above.) It seems that FF won’t display an item that “overflows” its container, even if there is a “transform” style to place it visually inside the container.
If you see this behaviour, temporarily comment out .dhx_view{overflow:hidden} and see the difference. Unfortunately .dhx_view{overflow:hidden} is important elsewhere, so changing this permanently is not a solution.
I did a little hack of DHTMLX Touch: in the dhx.delay(function() within dhx.animate.start function, I call p_node.style[‘overflow’] =“visible” if the transition is a slide, then p_node.style[‘overflow’] = “” in the two timeout functions that follow. There may be a better way to do this. 