0

Exist 2 theme, for watch the issue you should have ios device using touch, and visit the site, you will see the issue when after chosing a category you can't go back from the button "BACK" and you can't enter in other subcategory of 2 level like NAILS->SEMIPERMANENTE. On desktop simulating mobile devices you can't watch the issue, on android the mobile version works well.

I have a problem with just ios mobile devices, they can't execute some css 3d transform, The file in question is iphone.js taken from Magento Mobile Theme HTML5, for free in "magentoconnect", I have the version 1.9.2.4 of magento.

The problem appear just on ios mobile devices, because I have a mac and the problem doesn't appear, now.. I want some help for solve this issue, please.

The website in question is https://www.esteticaunghiediscount.it/

The PARTS iphone.js that create problem are this:

var transformPref = Modernizr.prefixed('transform');
function supportsTouchCallout () {
    var div = document.createElement('div'),
        supports = div.style['webkitTouchCallout'] !== undefined || div.style['touchCallout'] !== undefined;

    return supports
} 
function is_touch_device() {
  try {
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
}

var touch = is_touch_device();

 $$("#nav a").each(function(sliderLink) {
    if (sliderLink.next(0) !== undefined) {
        sliderLink.clonedSubmenuList = sliderLink.next(0);

        sliderLink.observe('click', function(e) {

            e.preventDefault();
            var transformValue = {}

            //homeLink.hasClassName('disabled') ? homeLink.removeClassName('disabled') : '';

            if (last) {
                diff = e.timeStamp - last
            }
            last = e.timeStamp;
            if (diff && diff < 200) {
                return
            }
            if (!this.clonedSubmenuList.firstDescendant().hasClassName('subcategory-header')) {
                var subcategoryHeader = new Element('li', {'class': 'subcategory-header'});
                subcategoryHeader.insert({
                    top: new Element('button', {'class': 'previous-category'}).update("Back").wrap('div', {'class':'button-wrap'}),
                    bottom: this.innerHTML
                });
                this.clonedSubmenuList.insert({
                    top: subcategoryHeader
                });
                subcategoryHeader.insert({ after : new Element('li').update('<a href="' + sliderLink.href + '"><span>Tutti Prodotti</span></a>') });

                this.clonedSubmenuList.firstDescendant().firstDescendant().observe('click', function(e) {
                    if (last) {
                        diff = e.timeStamp - last
                    }
                    last = e.timeStamp;
                    if (diff && diff < 200) {
                        return
                    }
                    if ( Modernizr.csstransforms3d ) {
                        transformValue[transformPref] = "translate3d(" + (document.body.offsetWidth + sliderPosition) + "px, 0, 0)";
                    } else if ( Modernizr.csstransforms ) {
                        transformValue[transformPref] = "translate(" + (document.body.offsetWidth + sliderPosition) + "px, 0)";
                    }
                    $("nav-container").setStyle(transformValue);
                    sliderPosition = sliderPosition + document.body.offsetWidth;
                    setTimeout(function() { $$("#nav-container > ul:last-child")[0].remove(); $("nav-container").setStyle({'height' : 'auto'})  }, 250)
                });
                new NoClickDelay(this.clonedSubmenuList);
            };

            $("nav-container").insert(this.clonedSubmenuList.setStyle({'width' : document.body.offsetWidth + 'px'}));
            $('nav-container').setStyle({'height' : this.clonedSubmenuList.getHeight() + 'px'});

            if ( Modernizr.csstransforms3d ) {

                transformValue[transformPref] = "translate3d(" + (sliderPosition - document.body.offsetWidth) + "px, 0, 0)";

            } else if ( Modernizr.csstransforms ) {

                transformValue[transformPref] = "translate(" + (sliderPosition - document.body.offsetWidth) + "px, 0)";

            }

            $("nav-container").setStyle(transformValue);

            sliderPosition = sliderPosition - document.body.offsetWidth;
        });
    };
});

function getSupportedProp(proparray){
    var root = document.documentElement;
    for ( var i = 0; i < proparray.length; i++ ) {
        if ( typeof root.style[proparray[i]] === "string") {
            return proparray[i];
        }
    }
}

function NoClickDelay(el) {
    if ( getSupportedProp(['OTransform']) ) {
        return
    }
    this.element = typeof el == 'object' ? el : document.getElementById(el);
    if( window.Touch ) this.element.addEventListener('touchstart', this, false);
}

NoClickDelay.prototype = {
    handleEvent: function(e) {
        switch(e.type) {
            case 'touchstart': this.onTouchStart(e); break;
            case 'touchmove': this.onTouchMove(e); break;
            case 'touchend': this.onTouchEnd(e); break;
        }
    },

    onTouchStart: function(e) {
        this.moved = false;

        this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
        if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;
        this.theTarget.className+= ' pressed';

        this.element.addEventListener('touchmove', this, false);
        this.element.addEventListener('touchend', this, false);
    },

    onTouchMove: function() {
        this.moved = true;
        this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
    },

    onTouchEnd: function(e) {
        e.preventDefault();

        this.element.removeEventListener('touchmove', this, false);
        this.element.removeEventListener('touchend', this, false);

        if( !this.moved && this.theTarget ) {
            this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
            var theEvent = document.createEvent('MouseEvents');
            theEvent.initEvent('click', true, true);
            this.theTarget.dispatchEvent(theEvent);
        }

        this.theTarget = undefined;
    }
};

if (document.getElementById('nav')) {
    new NoClickDelay(document.getElementById('nav'));
}

closed as off-topic by 7ochem, Murtuza Zabuawala, Raphael at Digital Pianism, Qaisar Satti, Sander Mangel Nov 29 '16 at 11:55

  • This question does not appear to be about the Magento e-Commerce platform within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 4
    I'm voting to close this question as off-topic because although the issue comes forth from a Magento theme's JS file, the question is more about iOS than Magento specifically – 7ochem Nov 29 '16 at 8:50
1

I've been dealing with the same problem. I'm not sure if I like my own solution (I'm probably not fully understanding what has broken), but it's what I have come up with for now.

First, this is an issue with iOS 10 only. I have seen it happen on both Chrome and Safari. Something has changed with the way "event timestamps" are calculated.

I have found that if use high-resolution time for instead of event timestamp, I can get the menu to work. In skin/frontend/enterprise/iphone/js/iphone.js, change e.timestamp to performance.now() in four separate locations. Change it in two locations starting on line 336 and then in two separate locations on line 355. Where you see this:

if (last) {
    diff = e.timestamp - last;
}
last = e.timestamp;
if (diff && diff < 200) {
    return
}

Change to this:

// ## BEGIN EDIT: No longer use event timestamps.
if (last) {
    diff = performance.now() - last;
}
last = performance.now();
// ## END EDIT
if (diff && diff < 200) {
    return
}

Let me know if this works for you as well. I'll update my answer if I find a better solution. Thanks.

Not the answer you're looking for? Browse other questions tagged or ask your own question.