Javascript代码的某些部分在最新的Chrome更新中停止工作

Question

I bought some files through codecanyon.net and they've been working fine on all browsers. Just recently I noticed they weren't working in Chrome.

The code is really big and I've tried to change some things through trial and error on the js file but was unsuccessful. You can see the slider at http://miguelsart.com/scroller-test .

As you can see, the captions are supposed to be hidden and once you hover they have slide up. But with Chrome, the captions appear automatically and nothing happens when you hover.

I think something is wrong in this part of the code:

//init captions
Scroller.prototype.initCaptions = function() {
    var $captions = this._$slides.find(">p:first");
    if (this._displayCaption) {
        var padding = $captions.outerWidth() - $captions.width();
        $captions.css({width:this._slideWidth - padding, display:"inline-block"}).click(preventDefault);
        if (this._captionPos == OUTSIDE) {
            var heights = $captions.map(function() { return $(this).height(); }).get();
            var maxHeight = Math.max.apply(Math, heights);                  
            $captions.css({top:this._captionAlign == TOP ? 0 : this._slideHeight, height:maxHeight});

            this._extHeight = $captions.outerHeight();                  
            if (this._captionAlign == TOP) {
                this._extOffset = this._extHeight;
            }
            $captions.addClass("outside");
        }
        else {
            if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 6 && parseInt(jQuery.browser.version) < 9) {
                $captions.addClass("ie-inside");
            }
            else {
                $captions.addClass("inside");
            }
        }                   
    }
    else {
        $captions.hide();
    }
}

I've tried messing around replacing display for opacity or for visibility but nothing worked. Does anyone have any clue what might be wrong?

Thanks in advance!

Answer 1

I believe I've figured out what's wrong with the author's implementation, and you are correct, it has to do with the latest version of Chrome.

On line 43 of jquery.wt.scroller.js

this._mouseoverCaption = window.Touch ? false : opts.mouseover_caption;

The author of the plugin is testing for native touch capabilities (by determining if window.Touch is defined). Chrome must've recently added native touch API capabilities in a recent version.

So what the author was going for, was saying that 'you can't hover on a touch device, so we can't show the captions on hover on a touch device so we'll just always show them' - which is logically.

However, just because touch capabilities exist, however, doesn't mean that touch input is the default (as in this case). Modernizr solves this issue (for now) by performing the following conditional:

if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {

Something tells me this will also soon be broken. ( https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js#L42 )

So, long story short (too late, I know) add this to the plugin code:

Add this to line 7 (push all lines down one):

var TOUCH = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;

Find and replace all occurrences of window.Touch with TOUCH in the plugin code.

Tell the author of the plugin I'll send him a bill. :)