CODEWITHSUNDEEP
jquerysvgsafari
Christopher Supertramp
Christopher Supertramp

Reputation: 263

Safari, SVG not clickable - every other browser works

I have a problem with a SVG but only in Safari!

I have a "Map" of a climbing gym where a User can select a line/sector to see all Routes which are there.. Everything works fine in Chrome, Firefox and even in Internet Explorer ^^

You can see it in Action here: http://www.climbtogether.at/routendatenbank/routes?center=test just click on the Button: "Übersichtsplan" or change the language to englisch and klick "Map-Overview"!

The svg-elements always have a class="sector" or class="line" and then there is my jquery which listens to clicks!

$('.linie, .sektor').click(function (){
             table.search($(this).data("sektor")).draw();
             $('#search').val($(this).data("sektor")+' ');
             $('#uebersicht').modal('hide');
        });

I found that for many people the solution with pointer-events: none work, but in my case if I change it then it doesnt work anywhere..

There is also a CSS for hovering which normaly works, but not in Safari!

Does somebody maybe have another solution?

Thank you!

Upvotes: 0

Views: 298

Answers (1)

Christopher Supertramp
Christopher Supertramp

Reputation: 263

Ok I've got it! It was because of my inline-style Settings which I need for Internet Explorer:

width: 100%; padding-bottom: 85%; height: 1px; overflow: visible; box-sizing: content-box;

So now I only need to find a way to set these Styles when somebody visits my site with IE!

Upvotes: 1

Related Questions