Magento – Magento 1.9 touch screen problem on windows 8 (chrome & firefox)

chrome-browsermagento-1.9menurwdwindows

I have a Magento 1.9 installation and I have problem with menu of new responsive theme of Magento.
The problem is with a windows 8 laptop with touch screen display and only with Chrome & Firefox. IE does not have any problem.
By mouse over on Menu the drop down does not work.
I have disabled the touch screen option on Chrome by using chrome://flags. That will solve the problem.
Does have anyone have a solution for this problem without disabling the browser touch screen option.
I should also mention it is not possible to scroll the screen with the browser bar.

Best Answer

I found a solution, modify app.js in your skin folder and at line 153:

Change

var pointerEvent = 'touchend';

to

var pointerEvent = 'mouseover';

There is also a bug with the zoom on the product view (zoom isn't active on the first image), change line 711 from:

ProductMediaManager.createZoom($j(".no-touch .gallery-image.visible")); //set zoom on first image

to:

ProductMediaManager.createZoom($j(".gallery-image.visible")); //set zoom on first image

Of course, if you modifiy app.js, it will be overwritten in the next version and you should not do it, but hopefuly these bugs will be resolved in the next version ;)

Thanks to Alfred Stephenson => http://www.magentocommerce.com/bug-tracking/issue/index/id/308

EDIT:

The version on demo.magentocommerce.com is working correctly. The difference is in app.js, on line 189:

}).on('click', function (event) {
    var elem = $j(this);
    if (elem.data('has-touch')) {
        elem.data('has-touch', false);
        event.preventDefault();
        return;
    }

    if(Modernizr.mq("screen and (max-width:" + bp.medium + "px)")) {
        var elem = $j(this).parent();

        var alreadyExpanded = elem.hasClass('menu-active');

        nav.find('li.level0').removeClass('menu-active');

        // Collapse all active sub-menus
        nav.find('.sub-menu-active').removeClass('sub-menu-active');

        if (!alreadyExpanded) {
            elem.addClass('menu-active');
        }

        event.preventDefault();
    }

change it to:

}).on('click', function (event) {
    var elem = $j(this);
    if (elem.data('has-touch')) {
        event.preventDefault();
    }

    elem.data('has-touch', false);
Related Topic