Search code examples
firefoxmobilehyperlinkscaleviewport

Firefox mobile: Links getting activated by touching elsewhere

I've got a strange probleme here.

If I have this line in the HEAD part

<meta name="viewport" content="width=1200,initial-scale=2,minimum-scale=2">

touching the lines which are not links in the following example causes one of the links to get activated:

<ul>
    <li><a href="http://www.example.com">example</a></li>
    <li><a href="http://www.test.com">test</a></li>
    <li>Text in between</li>
    <li>Even more text in between</li>
    <li><a href="http://www.something.com">something</a></li>
    <li><a href="http://www.other.com">other</a></li>
</ul>

This seems to happen only with that line in the HEAD part. Everything is okay with Chrome and Android Browser.

Is there any way to solve this?

Edit:

It gets even worse if I make the line-height small, for example this way:

li { font-family:Arial; font-weight:bold; font-size:12px; line-height:12px;}

Now whether I use that META element or not, it is almost impossible to tap the texts in between without activating one of the links. Again only in Firefox mobile browser.

Solution

  • I think I've found a solution, however, I don't like it very much.

    Adding an "onclick" attribute (whether empty or not) to each unlinked element makes it touchable in Firefox browser.

    This can be achieved through a small JavaScript loop.

    Better solutions are appreciated!