SVG IoS hover/double click issue

HTML & CSS
1

Hello,
I have looked and although there are similar posts, I am not sure I can see an answer to this exact query and googling it hasn’t given me a definitive fix, so hopefully someone here may have some input.

I have built a basic SVG election map that has 6 areas, with links to URLs from each area and it applies a :hover style to change the fill and stroke for each of the areas.

It works fine on the desktop and in most mobile devices (ignoring the hover on mobile which is fine). However it does invoke the known IoS mobile device issue where you need to ‘click’ twice, to activate the link, the first time shows the hover style, the second activates the link.

I have also tried another version where there are no :hover styles related to the objects but the issue persists. I have also tried styling the areas inline rather than with a separate css but that made no difference.

Any ideas or thoughts greatly appreciated. This is my first SVG map so I could be missing something simple.

Thank you,
Matt

2

Do you have an example that we can test or play with?

The svg shape link on this page seems to work on ios.

3

Him,
Here is a link to the original SVG and also a second one I have created that doesn’t reference the #id’s with the hover css change - however that doesn’t seem to be removing the double click issue either.

https://www.cornwall.gov.uk/hidden-pages/svg-elections-map-test/

This is a hidden page on our live site.

Any input much appreciated, like I said it could be something very obvious.

Thank you,
Matt

4

Both those maps work on my iphone ok but they do need a double click (although they don’t need a double click if you return or move to another item).

I don’t think there is an easy way around the 300ms delay as it has been discussed in detail. The best discussion seems to be here:

The script at the end of the article is mentioned on a few places but I have not tested it.

I tend to think that the delay is there for a reason and should I want to scroll the page I don’t want a link activated straight away especially on a mobile with a slow expensive connection

5

Thank you.

I don’t mind the delay so much, but I would prefer the link to open with a single click as it does in chrome and the other android browser I have.

I’ll take a look at that script and continue to consider how much of a usability issue this actually is for mobile device IoS users.

Thanks for the input,
Cheers,
Matt

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.