Цвет выделенного касания Webkit на страницах ASP.NET 3.5, включая ScriptManager - PullRequest
Новая
       4

Цвет выделенного касания Webkit на страницах ASP.NET 3.5, включая ScriptManager

1 голос
/ 01 ноября 2011

Мы разрабатываем приложение jQuery Mobile с использованием ASP.NET 3.5, и у нас возникла проблема с большим количеством больших, странных и отвлекающих бликов.Я обнаружил, что включение ScriptManager на страницу, по-видимому, является виновником, в нашем случае.Вот простая страница .aspx, которая должна воспроизвести проблему (я тестирую на Android 2.2.2 и 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>

С ScriptManager этот тег h1 будет выдавать подсветку касания каждыйраз коснулся.Потеряйте ScriptManager, и выделение крана исчезнет.Предполагая, что ScriptManager необходим, есть ли что-нибудь лучше, чем делать что-то вроде: 

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

Добавление правила CSS в нашу таблицу стилей не работает, потому что инициализация ScriptManager на стороне клиента, кажется, переопределяет егокаким-то образом.

1 Ответ

0 голосов
/ 27 сентября 2012

ScriptManager добавляет обработчик кликов к элементу формы, так что на самом деле webkit перехватывает щелчки на форме - H1 просто оказывается внутри него с точки зрения DOM.

Вы можете доказать это, переместив тег <form> после тегов <H1></H1>, естественно, это не будет практичным для всех ваших элементов.

Я думаю, что подход добавления "-webkit-tap-highlight-color" действителен, но, возможно, вам нужно сделать это после того, как менеджер скриптов сделает свое дело: 

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

Вы также можете поэкспериментировать с добавлением встроенного CSS к конкретным элементам формы / h1 просто для того, чтобы устранить проблемы каскадирования или сценариев CSS.

...