search

digidem / leaflet-side-by-side

A Leaflet control to add a split screen to compare two map overlays
http://lab.digital-democracy.org/leaflet-side-by-side/
MIT License
351 stars 111 forks source link

Dragging not working in newest Safari #28

Open rsalzer opened 5 years ago

rsalzer commented 5 years ago

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

moklick commented 4 years ago

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 commented 4 years ago

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

moklick commented 4 years ago

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

Aaronliu2016 commented 4 years ago

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 commented 4 years ago

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

rsalzer commented 4 years ago

Did you do a PR already? ;)

Aaronliu2016 commented 4 years ago

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 commented 4 years ago

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

biennui1998mu commented 3 years ago

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

rsalzer commented 3 years ago

Unfortunately not :(

rsalzer commented 3 years ago

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

rsalzer commented 3 years ago

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...?