1240611 - RoyalSlider demo stops working

Status: RESOLVED DUPLICATE of bug 1241021

(Core :: CSS Parsing and Computation, defect)

Description

[Alice0775 White]

Steps To Reproduce:
1. Open http://dimsemenov.com/plugins/royal-slider/gallery/
2a. Hover over large image and Click ">" mark
OR
2b. Click thumbnail

Actual Results:
Image does not slide

Expected Results:
Image should slide

Comment 1

[Mike Taylor [:miketaylr]]

I suspect that Bug 1236979 will fix this, but am still taking a look.

Comment 2

[Daniel Holbert [:dholbert]]

My current WIP patch for Bug 1236979 (which fires listeners for prefixed animation/transition events) does not fix this.

That patch is mostly-complete -- AFAIK, the only missing thing is setting the 'type' field of the event correctly (which sites probably don't depend on).  So, I am tentatively skeptical that this is an instance of Bug 1236979.

Comment 3

[Mike Taylor [:miketaylr]]

Ah, bummer. OK, will keep digging.

Comment 4

[Daniel Holbert [:dholbert]]

Comparing a broken (webkit-enabled) browser vs. a working (webkit-disabled) browser side-by-side, it looks like the key difference is that <div class="rsContainer"> is never getting its "style" attribute set.

In particular, if I click on the second thumbnail, then in my working browser, rsContainer ends up having style="transition-duration: 600ms; transform: translate3d(-558px, 0px, 0px); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);"

In a broken browser, if I click the second thumbnail, this does not happen. But if I manually add that style attribute, then I get EXPECTED RESULTS.

Comment 5

[Daniel Holbert [:dholbert]]

Side note: this slightly-different royalslider demo (with the same images) *does* work correctly in current nightly:
 http://dimsemenov.com/plugins/royal-slider/visible-nearby/

Comment 6

[Mike Taylor [:miketaylr]]

I *think* the problem here is setting "-webkit-foo" via jQuery.fn.css() is for some reason failing. Setting the element's style property directly works as expected.

You can verify in the console by doing the following in the console: 
$('.rsContainer').css('-webkit-transform', 'translate3d(0px, 0px, 0px)')
$('.rsContainer').css('transform', 'translate3d(0px, 0px, 0px)');

$('.rsContainer')[0].style = '-webkit-transform: translate3d(0px, 0px, 0px)' works.

Real debugging minified JS in our devtools isn't great right now, but using Charles proxy and the following silly method I can verify we're getting the same values set via .css() as Chrome:

(function($){
    var _old = $.fn.css;
    $.fn.css = function(prop, val){
        console.log(prop + ':' + val);
        return _old.apply(this,arguments);
    };
})(jQuery);

So, time to look at jQuery.prototype.css() in version 1.11.0.

(In reply to Daniel Holbert [:dholbert] from comment #5)
> Side note: this slightly-different royalslider demo (with the same images)
> *does* work correctly in current nightly:
>  http://dimsemenov.com/plugins/royal-slider/visible-nearby/

This seems to be animating on 'left', not sure if that's a config option or something else.

Comment 7

[blinky]

Regression range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=530c5bc61a02d1045101a7fdd91cc234e7ba558d&tochange=a23e9cbf415d7dfe54ad6ad687a90492ac039796

Regressed by: bug 837211

Comment 8

[Mike Taylor [:miketaylr]]

Attachment: jquery-css.html

Small test case to show that setting -webkit-transition on an element doesn't result in unprefixed 'transition' getting set (which is apparently the jQuery behavior -- in Chrome, Safari and Edge). 

Time to start looking at https://github.com/jquery/jquery/blob/master/src/css.js#L215.

Comment 9

[Mike Taylor [:miketaylr]]

OK, the reason we fail here is less scary than I had originally suspected. Basically it boils down to `return style[name]` not working, after `-webkit-transition` is converted to `WebKitTransition`. 

We support setting elem.style['webkitFoo'] but not elem.style['WebKitFoo']. I'll file a bug -- zcorpan added this to CSSOM a few weeks back: https://github.com/w3c/csswg-drafts/commit/296f35860633521ecac2bb680b0963110c6046f8

Comment 10

[Daniel Holbert [:dholbert]]

Good sleuthing! When you file the bug, please assign it to me, or tag me as needinfo.

Comment 11

[Mike Taylor [:miketaylr]]

This is working in Nightly now, gonna dupe against Bug 1241021.