Home/ Questions/Q 8591475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:32:13+00:00

We’re developing a jQuery Mobile application using ASP.NET 3.5, and we’ve run into a

  • 0

We’re developing a jQuery Mobile application using ASP.NET 3.5, and we’ve run into a problem with lots of large, strangely shaped, and quite distracting tap highlights. I discovered that the inclusion of a ScriptManager in the page seemed to be the culprit, in our case. Here’s a simple .aspx page that should reproduce the problem (I’m testing on Android 2.2.2 and iOs 4.2.6).

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"   Inherits="WebApplication2.Default" %>
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        <title>Title</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">  </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
            <h1>Oh Hai!</h1>
        </form>
    </body>
    </html>

With the ScriptManager, that h1 tag will produce a tap highlight each time it’s touched. Lose the ScriptManager, and the tap highlight goes away. Assuming that the ScriptManager is necessary, is there anything better than doing something like:

    <script type="text/javascript">
    $(function () {
        $('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
    })
    </script>

Adding a css rule to our stylesheet doesn’t work, because the client-side initialization of the ScriptManager seems to override it somehow.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    ScriptManager is adding a click handler to the form element, so in fact webkit is intercepting clicks on the form – H1 just happens to be within it from a DOM perspective.

    You could prove this by moving the <form> tag after the <H1></H1> tags, naturally that won’t be practical for all your elements.

    I think the approach of adding “-webkit-tap-highlight-color” is valid but perhaps you need to do this after script manager does its stuff:

           $(document).ready(function(){
    $('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)'); 
       });

    You could also experiment with adding the css inline to specific form/h1 elements just to eliminate css cascading or script issues.

    • 0