kornelski / slip

Slip.js — UI library for manipulating lists via swipe and drag gestures
BSD 2-Clause "Simplified" License
2.44k stars 213 forks source link

Safari cursor update bug #88

Open Sauvage9 opened 7 years ago

Sauvage9 commented 7 years ago

I'm styling cursors via cssText by calling this.fixCss(1); in reorder followed by this.fixCss(0) in reorder:onEnd (requires cssMap:{}, in prototype)

fixCss:function(state){
    if(state){
        this.cssMap.body=document.body.style.cssText;document.body.style.cssText=this.cssMap.body+'-moz-user-select:none;-webkit-user-select:none;user-select:none;cursor:move;cursor:-webkit-grabbing;cursor:grabbing';
        this.cssMap.node=this.target.node.style.cssText;this.target.node.style.cssText=this.cssMap.node+'-moz-user-select:none;-webkit-user-select:none;user-select:none;cursor:move;cursor:-webkit-grabbing;cursor:grabbing';
        if(this.target.originalTarget!=this.target.node){this.cssMap.originalTarget=this.target.originalTarget.style.cssText;this.target.originalTarget.style.cssText=this.cssMap.originalTarget+'cursor:inherit'};
    }else{
        if(document.body.style.cssText!=this.cssMap.body){document.body.style.cssText=this.cssMap.body};
        if(this.target.node.style.cssText!=this.cssMap.node){this.target.node.style.cssText=this.cssMap.node};
        if(this.target.originalTarget!=this.target.node&&this.target.originalTarget.style.cssText!=this.cssMap.originalTarget){this.target.originalTarget.style.cssText=this.cssMap.originalTarget};
    };
},

This works perfectly in Chrome & Firefox but is buggy in Safari. Safari cursor changes when otherNodes are in transition. I would love to see this fixed...

Sauvage9 commented 7 years ago

Fixed

Apparently Safari suffers from the same compositorDoesNotOrderLayers bug as Chrome, although in a slightly different fashion.

Changing if (compositorDoesNotOrderLayers) {this.container.style.webkitTransformStyle = 'preserve-3d'} to this.container.style.webkitTransformStyle = 'preserve-3d'; does the trick and since it's vendor prefixed you don't need to worry about other browsers.