How to allow clicks on an svg child element with visibility: hidden?

Question

I have a complex SVG diagram that has constant rendering issues in Edge (parts of the diagram flicker, disappear etc. at random intervals.) I fixed it (sort of) by continuously adding and removing 'visibility: hidden' to the parent div. This 'fixes' the layout once it breaks (but doesn't stop it from breaking again).

The hidden to visible change happens quickly enough that visually, there's no difference and the diagram doesn't disappear from the page.

My problem is that users need to click on the diagram to get further information, and click events get missed if they happen while the element has visibility: hidden set to it (even if it appears to be visible).

How do I allow clicks on an element that with 'visibility: hidden'?

Here is a fiddle: http://jsfiddle.net/kmbgp95a/

Main CSS involved:

.hidden {
    visibility:hidden
}

I have tried using opacity: 0 but I still have the same issue.

@JerdineSabio I already tried but I have the same issue with opacity: 0. — souzan, Oct 22 '18 at 05:43
Not an exact duplicate but someone created a table I was writing which explains the different scenarios https://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden/273076#273076 — k2snowman69, Oct 22 '18 at 05:44

score 1 · Answer 1 · answered Oct 22 '18 at 05:46

1

You can't click on a hidden element with mouse. Either you have to trigger the click event from code or use opacity property instead:

$('.hidden').click(function() {
    alert('hidden was clicked');
});

$('div').click(function() {
    alert('div was clicked');
});

div {
    background-color:red;
    width:100px;
    height:100px;
}

.hidden {
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden"></div>
<div></div>

answered Oct 22 '18 at 05:46

Mamun

66,969
9
47
59

@souzan, `I have tried using opacity: 0 but I still have the same issue.`--------- you can run the snippet to see how the code is working with `opacity:0`. – Mamun Oct 22 '18 at 06:16
it works in the snippet but it doesn't work with my svg code. Unfortunately the diagram consists of 1000+ lines of svg code and I can't share it here. – souzan Oct 22 '18 at 12:36
@souzan, if we are unable to experience the issue then it will be really difficult to find a solution for that..........thanks. – Mamun Oct 22 '18 at 13:07
@souzan, it would be nice if you share the solution so that I can update the answer for the future reader of the post......thanks. – Mamun Oct 23 '18 at 04:09
I posted it in my own answer, basically opacity: 0 had to be added to the individual – souzan Oct 23 '18 at 08:29

stalinrajindian · Answer 2 · 2018-10-22T05:51:12.540

0

I have checked with opacity property. It's working fine.

.hidden {
    opacity:0;
}

edited Oct 22 '18 at 05:51

answered Oct 22 '18 at 05:45

stalinrajindian

1,363
1
14
22

souzan · Accepted Answer · 2018-10-23T08:28:52.503

-1

I solved the issue by adding opacity: 0 to the individual svg elements (<path>, <rect> etc.) instead of adding it to the svg itself.

edited Oct 23 '18 at 08:28

answered Oct 23 '18 at 04:02

souzan

289
1
2
14

How to allow clicks on an svg child element with visibility: hidden?

3 Answers3