Содержимое некоторого div становится размытым при запуске функции ajax в некоторых браузерах

Question

В настоящее время я работаю над проектом веб-приложения в рамках моего тренинга для разработчиков. Его принцип довольно прост: это поисковая система, предназначенная для размещения результатов SQL-запросов в базе данных, принадлежащей клиенту и ранее перенесенной. У меня есть особая проблема, действительно, в некоторых браузерах (основанных на Chrome) при отображении результатов (они находятся в таблице) содержимое некоторых тегов div становится размытым и немного нечитаемым. Это, вероятно, распространенная проблема, однако я не нашел ничего ясного об этой ошибке. Размытая область находится вверху страницы.

Вот функция, вызываемая при поиске:

function rechercher()
{
    var name = document.getElementById('rech').value;
    var checked = 0;
    var selectedMarque = $('#marque :selected').text();
    var selectedType = $('#type :selected').text();
    var selectedCat = $('#cat :selected').text();
    var selectedCompagnie = $('#compagnie :selected').text();

    if ($('#inputFerro').is(":checked"))
    {
        var checked = 1;
    }
    else
    {
        var checked = 0;
    }

    $.ajax({
    type: "POST",
    url: "./fonction/some.php",
    data: {name: name, checked:checked, selectedMarque: selectedMarque, selectedType:selectedType, selectedCat: selectedCat, selectedCompagnie: selectedCompagnie},
    success: function(msg){
        if(checked == 0)
        {
            $('#resultat').empty();
            if(msg.length <= 2)
            {
                $('#resultat').empty();
                $('#resultat').append("Aucun résultat");
                $('#resultat').append('<table id="tblRes"></table>');
            }
            else
            {
                $('#resultat').append('<table id="tblRes"></table>');
                $('#tblRes').append("<tr><th>Compagnie</th><th>Type</th><th>Numéro</th><th>Marque</th><th>Essieux</th><th>Catégorie</th><th>Échelle</th></tr>");
                $('#tblRes').append(msg);
            }

        }
        else
        {
            $('#tblRes').empty();
            $('#tblRes').append("<tr><th>Type</th><th>Numero article</th><th>Marque</th><th>Catégorie</th><th>Echelle</th></tr>");
            $('#tblRes').append(msg);
        }

    }
    });
}

И результат div, где результат хранится в:

<div id="resultat">
    <table id="tblRes">

    </table>
</div>

Я делюсь с вами скриншотами ситуации ниже, надеясь, что размытый эффект будет виден.

Вот рендеринг под Chrome (версия с ошибками): версия Chrome

Вот рендеринг под Firefox: версия Mozilla

Ссылка на веб-приложение: www.ferrovipathe.ch

Этот проект находится в разработкеи, следовательно, не является полным. Не нужно комментировать остальную часть операции: D Я заранее прошу прощения, если я не задал свой вопрос в соответствии со всеми стандартами, требуемыми SO. Это мой самый первый пост! :)

Answer 1

Я протестировал его на вашем сайте, изменив CSS, и мне показалось, что он работает: / Nomatter, я обнаружил реальную проблему, у вас есть margin-top: 0px в вашем CSS, и если вы его удалите, кажется,чтобы показать без размытия, надеюсь, что этот ответ поможет вам решить эту досадную ошибку ...

Вот некоторые доказательства:

Ваша страница с margin-top: 0px

Ваша страница без строки

Answer 2

Я думаю, что нашел что-то для вас, вот источник

    #yourDiv {
      -webkit-filter: blur(0.000001px);
    }

    #yourDiv {
      -webkit-font-smoothing: antialiased;
    }

Надеюсь, это поможет вам;)