4

I have the strangest issue with the default browser of the Samsung Galaxy SIII on Android 4.0.4:

With the following page, clicking on the links will not trigger the JavaScript handlers. Removing a single 'a' letter from the content one of the divs makes them work again...

Here is a screenshot of the JS console:

enter image description here

I opened an android bug report, if you have the same issue please star it, thanks.

Thank you in advance for your help!

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        alert('attaching click handlers');
        $("#red").click(function(e) {
            alert('red clicked');
            $("body").css("background-color", "#CC0000");
        });
        $("#green").click(function(e) {
            alert('green clicked');
            $("body").css("background-color", "#00CC00");
        });
        $("#blue").click(function(e) {
            alert('blue clicked');
            $("body").css("background-color", "#0000CC");
        });
    });
</script>
</head>
<body>
    <div>
        <p>
            <a id="red" href="#">CHANGE TO RED</a>
        </p>
        <p>
            <a id="green" href="#">CHANGE TO GREEN</a>
        </p>
        <p>
            <a id="blue" href="#">CHANGE TO BLUE</a>
        </p>
    </div>
    <p>Removing one of the a's in the content below will make the JS
        click events work (i.e. trigger background color change), and
        so will changing the 'page' class or id into something else</p>
    <div class="page" id="page">
        <div>aaaaaaaaaaaaaaaaaaa</div>
        <ul>
            <li>
                <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
            </li>
        </ul>
    </div>
</body>
</html>
Joel Arnold
  • 1,201
  • 13
  • 28
  • Try $(element).on('blur', function(){}); – Mark Verkiel Jul 17 '12 at 12:14
  • @Pilatus I tried $("#blue").blur(function(e) {... but it doesn't work, did you try it with my example file? – Joel Arnold Jul 17 '12 at 12:22
  • This works fine on Galaxy Nexus Android 4.0.4 default browser. Have you tried looking at the console if the Galaxy SIII browser throws any errors? – Torsten Walter Jul 17 '12 at 12:34
  • @TorstenWalter When I click on a link I get: `Uncaught TypeError: Cannot convert null to object` – Joel Arnold Jul 17 '12 at 12:51
  • Actually I get the error at page load... – Joel Arnold Jul 17 '12 at 13:07
  • @TorstenWalter Do you get these log messages from Reader::Recognize on the Nexus? – Joel Arnold Jul 17 '12 at 13:26
  • @JoelArnold I don't get any logs on my sample page copied from your code: http://magicrising.de/clicktest/ Maybe the domready event isn't fired correctly and the elements are not available at the time you want to attach the events. – Torsten Walter Jul 17 '12 at 16:39
  • @TorstenWalter Thanks for testing this! – Joel Arnold Jul 19 '12 at 07:45
  • Similar to the above, I wanted to mention that we're working on a fairly large webapp right now and seeing strange anomalies everywhere on the SIII, mostly related to redraws / reflows, and dom manipulation within scrollable lists. We have been unable to find any acceptable solutions. On the SII running the same software, no issues. Also, to make things worse, we've tested SIII's from T-Mobile and Verizon, and some issues are fixed on T-Mobile that aren't on Verizon, and vice versa – cnp Nov 20 '12 at 22:29

3 Answers3

2

Actually there is at least an easy solution: change the id of the DIV to not contain the 'page' substring...

It is more a workaround than a solution but what else can be done if the browser has a buggy customization?

Joel Arnold
  • 1,201
  • 13
  • 28
  • can you please explain how is this related? – epeleg Nov 05 '12 at 12:35
  • @epeleg I wish I could, I just found this workaround while trying to understand why it happened on some pages and not others. Do you have this issue? – Joel Arnold Nov 05 '12 at 16:12
  • possibly so, but It is a bit hard to catch :( do you have any pointer to any explanation on this? those are bugs that happen on devices that I have no control of. but I defiantly have the 'page' as a sub string of the id of some divs in my app. – epeleg Nov 07 '12 at 08:34
1

I just had a similar problem on a Samsung Galaxy. Found this thread. Changing from: 

span id="page"

to: 

span id="pgNow"

fixed it!

nickhar
  • 19,981
  • 12
  • 60
  • 73
Jeff
  • 11
  • 1
0

Something like this will work, too:

<a href='http://www.google.de' ontouchstart='window.location = this.href'>foo</a>"
czuendorf
  • 853
  • 6
  • 9