Fix not clickable button with svg in Safari#1985
Conversation
thompsongl
left a comment
There was a problem hiding this comment.
Thanks!
Add a changelog entry, also
| padding: $euiSizeXS; | ||
| border-radius: $euiBorderRadius; | ||
|
|
||
| & > svg { |
There was a problem hiding this comment.
If you wouldn't mind, add a comment here so it's clear why we have it.
There was a problem hiding this comment.
Following up on @thompsongl 's comment. Can you also point to documentation somewhere online that shows what the bug in Safari is and how this fixes it?
There was a problem hiding this comment.
@cchaos here links to issues with similar cases, where the applied solution is described:
There was a problem hiding this comment.
Ahh I see, it's an issue particular to using <use> within the <svg> tag. We have a problem where Sketch likes to export our icons using this syntax
But there are ways to avoid this and I try to do so when I'm exporting SVG's.
@snide & @ryankeairns This issue feels like it should be solved in the SVG's themselves and not with this generic selector though it also feels like it might be good to have as a backup. Thoughts?
I do think we should really go through and cleanup any <defs> and <use> usages, but should we keep this in as well?
There was a problem hiding this comment.
Ok, I made a follow-up issue to resolve in the icons themselves. #1989 Thanks for adding the comment @maryia-lapata
|
Makes sense to do both.
…On Mon, Jun 3, 2019, 8:17 AM Caroline Horn ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In src/components/button/button_icon/_button_icon.scss
<#1985 (comment)>:
> @@ -11,6 +11,10 @@
padding: $euiSizeXS;
border-radius: $euiBorderRadius;
+ & > svg {
Ahh I see, it's an issue particular to using <use> within the <svg> tag.
We have a problem where Sketch likes to export our icons using this syntax
[image: Screen Shot 2019-06-03 at 11 13 18 AM]
<https://user-images.githubusercontent.com/549577/58812909-be212800-85f0-11e9-9f24-18fad9739031.png>
But there are ways to avoid this and I try to do so when I'm exporting
SVG's.
@snide <https://github.com/snide> & @ryankeairns
<https://github.com/ryankeairns> This issue feels like it should be
solved in the SVG's themselves and not with this generic selector though it
also feels like it might be good to have as a backup. Thoughts?
I do think we should really go through and cleanup any <defs> and <use>
usages, but should we keep this in as well?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1985?email_source=notifications&email_token=AACPHJ3XTQ7DZFVR6BI63MTPYUYYHA5CNFSM4HRWVNR2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOB2MZWPY#discussion_r289897585>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AACPHJ3ZARG6FRWCOVRHPMLPYUYYHANCNFSM4HRWVNRQ>
.
|
Summary
This PR is related to this comment elastic/kibana#36896 (review) where an issue was detected: click event sometimes is not fired on a button with svg element in Safari and IE.
At the following screenshot you can noticed that 2nd-5th clicks don't lead to removing of rows:
Checklist