Dragging not working in newest Safari

[rsalzer]

In Safari 12.1.1 on the Mac dragging does not work anymore. You can reproduce it with the Live example.

[moklick]

Hey @rsalzer

It seems that safari is not re-rendering / re-calculating the layers with the new clip. I could fix the problem by setting the clip to "unset", force a re-render and then set the new clip. In the _updateClip function you need to replace the lines 132-137 with the following ones:

   ... 
    if (this._leftLayer) {
      const leftContainer =  this._leftLayer.getContainer()
      leftContainer.style.clip = 'unset'
      leftContainer.offsetWidth; // forces re-calculation
      leftContainer.style.clip = clipLeft
    }
    if (this._rightLayer) {
      const rightContainer = this._rightLayer.getContainer()
      rightContainer.style.clip = 'unset'
      rightContainer.offsetWidth; // forces re-calculation
      rightContainer.style.clip = clipRight
    }

[rsalzer]

With your fix it updates, but there is new weird behaviour:

• Sometimes both sides show the same map
• Sometimes only one side scrolls, the other stays untill the separator is dragged...

[moklick]

yeah, it's also a bit hacky. I think this plugin needs a few changes but it seems unmaintained.

[Aaronliu2016]

Dragging with one finger touch in iOS (both safari and chrome for iOS）doesn't work, either.
You can only drag using two finger like zooming in/out.

[Aaronliu2016]

fixed with clip-path instead of clip.
https://github.com/Aaronliu2016/leaflet-side-by-side/blob/4d3b2d678848f1cdf78b3c6749de81028c7d3e83/index.js#L121

[rsalzer]

Did you do a PR already? ;)

[Aaronliu2016]

Nope, because I only tested it on iOS 13.+ and Mac OS X, Not sure if this fix works properly on other devices. :P

[rsalzer]

Do you have a working example? I used your js and it still does not seem to work in my Safari on mac.

[biennui1998mu]

Did you found the way to fix it? I tried Aaron's js but its not work

[rsalzer]

Unfortunately not :(

[rsalzer]

Does anyone have a clue how to fix it? It would be a shame if we can not use the plugin in safari ...

[rsalzer]

Two commits before ... it seemed to still work.
This version here: https://github.com/digidem/leaflet-side-by-side/tree/290b4482dac0d681ec188e8dcce1a4b746f1a6f0
Maybe someone can figure out, whats the difference...?