Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click on 'sortable' element under Firefox #94

Open
Oleksa opened this issue Oct 26, 2017 · 8 comments
Open

Click on 'sortable' element under Firefox #94

Oleksa opened this issue Oct 26, 2017 · 8 comments

Comments

@Oleksa
Copy link

Oleksa commented Oct 26, 2017

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
Copy link
Owner

I can't reproduce it.

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

@Oleksa
Copy link
Author

Oleksa commented Oct 27, 2017

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
Copy link
Owner

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

@Oleksa
Copy link
Author

Oleksa commented Oct 30, 2017

Thank you for response.
Actually no changes in the behavior if you replace <a ...> to <span... >
(:-(
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
Copy link
Owner

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
Copy link
Contributor

myfrom commented Jun 1, 2018

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
Copy link
Owner

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

@myfrom
Copy link
Contributor

myfrom commented Oct 24, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants