The content of some div becomes blurry when running an ajax function on some browsers

Question

I am currently working on a web application project as part of my developer training. Its principle is quite simple, it is a search engine dedicated to listing the results of SQL queries on a database belonging to a customer, and previously migrated. I have a particular problem, indeed, on some browsers (those based on chrome), when displaying the results (they are in a table) the content of some divs tags becomes blurry and a little unreadable. This is probably a common problem, however I have not found anything clear about this bug. The blurred area is at the top of the page.

Here is the function called on search:

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);
        }

    }
    });
}

And the result div where result are stocked in :

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

    </table>
</div>

I share with you below screenshots of the situation, hoping that the blurred effect will be visible.

Here is the rendering under chrome (buggy version): chrome version

Here is the rendering under firefox: mozilla version

Web application link: www.ferrovipathe.ch

This project is under development and is therefore not complete. No need to comment on the rest of the operation :D I apologize in advance if I did not ask my question in accordance with all the standards required by SO. This is my very first post! :)

Maybe you should include a (minimal self-content) piece of code that shows what you've already did? — ghilesZ, Oct 02 '19 at 09:32
Just looks like normal Chrome anti-aliasing to me, increase the contrast, switch the font or make it a little bigger (Arial isn't idea at that size). — CD001, Oct 02 '19 at 09:45
"_when displaying the results (they are in a table) the content of some divs tags becomes blurry_" So the content is crisp when **not** displaying the results? — brombeer, Oct 02 '19 at 09:47
@kerbholz No, when you launch a search and display result, it become blurry on my screen — BenG_CH, Oct 02 '19 at 09:51

score 1 · Accepted Answer · answered Oct 02 '19 at 12:39

I've tested it on your site by modifying the CSS and it seemed to work for me :/ Nomatter, I found the real problem, you've a margin-top: 0px on your CSS and if you remove it, it seems to show without blur, hope this answer will help you resolve this annoying bug...

Here are some proofs :

Your page with the margin-top: 0px

Your page without the line

score 0 · Answer 2 · answered Oct 02 '19 at 12:06

0

I think I've found something for you, here's the source

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

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

Hope it'll help you ;)

answered Oct 02 '19 at 12:06

Arlien

132
1
17

The content of some div becomes blurry when running an ajax function on some browsers

2 Answers2