search

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

Click on 'sortable' element under Firefox #94

Open Oleksa opened 6 years ago

Oleksa commented 6 years ago

Hi! Under Firefox unable to click on element inside 'Slip' container. The problem coming from states.undecided function. A click is blocked on an element with style.willChange = 'transform'. I propose to eliminate line

this.target.node.style.willChange = transformCSSPropertyName;

for FireFox browser.

Thank you!

kornelski commented 6 years ago

I can't reproduce it.

Which version of Firefox? Do you get a JS error in the console?

Oleksa commented 6 years ago

Pls take a look to http://jsfiddle.net/ASerbinenko/p264bavb/9/ Under 'Chrome' both sign 'X' and item text are clickable (You can see response in console) But under Firefox only item text is clickable, not sign 'X'. I think the problem is relative to the ::before css attribute: .pri-delete::before { content: "x"; }

Thank you, -=A=-

kornelski commented 6 years ago

This is because you have <a href="javascript:void(0)". You should never use this for anything, ever.

Oleksa commented 6 years ago

Thank you for response. Actually no changes in the behavior if you replace <a ...> to (:-( Pls take a look: http://jsfiddle.net/p264bavb/10/

Could you add config parameter (for example) for disable optimization by property 'willChange'? this.target.node.style.willChange = transformCSSPropertyName;

kornelski commented 6 years ago

will-change is needed, and it doesn't throw JS errors, so I don't want to remove it.

That might be a Firefox CSS bug. Removing position: absolute; from .fli .btn-icon .pri fixes the issue for me. Try using flexbox instead maybe?

myfrom commented 6 years ago

I can confirm this issue. It seems specific for Firefox.

In my case it's a bit more interesting: I've got a lost containing paper-input elements (Polymer elements). After applying Slip on that list, you can't click directly on them. Interestingly, clicking slightly below them actually works. Here's my example: JSBin.

Manually resetting will-change to unset fixes the problem. Is it really necessary? I think it could be made into a opt-out feature which would detect if the browser is Firefox and if so, not set the will-change style.

It might be a Firefox bug, I'll look into reporting it on their bug tracker.

kornelski commented 6 years ago

Yes, please report it to Firefox's bug tracker.

myfrom commented 5 years ago

Sorry that it took so long but I've finally managed to reproduce this bug in plain HTML. I didn't want to report an issue saying that it happens with a specific library so when I had my free time I was trying to isolate the problem from Slip.

Here's link to Firefox bug tracker