HubSpot / vex

A modern dialog library which is highly configurable and easy to style. #hubspot-open-source
http://github.hubspot.com/vex/docs/welcome
MIT License
6.93k stars 497 forks source link

Button disappearing in Safari Webview #210

Open timi2shoes opened 7 years ago

timi2shoes commented 7 years ago

I found a bug in Safari Webview where when a vex-dialog-button is focused and then a drop down is selected the button disappears. I was able to fix the problem by removing -webkit-backface-visibility: hidden; from vex-theme-top.css line 404.

https://github.com/HubSpot/vex/blob/3544c7386aba85d91b0e68d398a0968e3d8d57c6/dist/css/vex-theme-top.css#L404

My question though is why is -webkit-backface-visibility: hidden; used there since there does not appear from what i can see a need for it there?

bbatliner commented 7 years ago

You're right, there doesn't seem to be a need for the backface-visibility.

Can you include a picture/gif of the original problem, and your fix? At that point I will be comfortable merging a PR in to fix this.

Thank you!

timi2shoes commented 7 years ago

So what happens is that the button always stays there, it can be clicked, but it disappears and cannot be seen.

safari-focus-click-drop-down-button-visible

safari-focus-click-drop-down-button-disappearing

In my fix I removed -webkit-backface-visibility: hidden; from line 404 and 413. I did notice that -webkit-backface-visibility: hidden; was used line 297 and 305, not sure if those are required in there too.