Wrong behavior of jQuery Script

Question

please have a look at Demo Galery

There are some bugs I'm not able to fix.

1. In Safari, the text is flickering while mouseover other elements
2. in Safari and Chrome, the images are not the correct size (270x128) - only in Firefox is that shown correct
3. in Firefox the fadeout effect is not smooth

CSS code:

div li img{
    width: 270px;
    height: 128px;
    -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
    -moz-transform:scale(0.8); /*Mozilla scale version*/
    -o-transform:scale(0.8); /*Opera scale version*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/
    opacity: 1; /*initial opacity of images*/
    margin: 0 10px 5px 0; /*margin between images*/
    box-shadow:0px 20px 10px -15px #000;
}

img:hover {
    -webkit-transform:scale(0.85); /*Webkit Scale version*/
    -moz-transform:scale(0.85); /*Mozilla scale version*/
    -o-transform:scale(0.85); /*Opera scale version*/
    box-shadow:0px 0px 30px #000; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px #000; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px #000; /*Mozilla shadow version*/
    opacity: 1;
}

.overlay {
    position: absolute;
    margin-top: -190px;
    height: 200px;
    width: 220px;
    z-index: 9999;
    background-color: red;
    opacity: 0;
}

div li {
    float: left;
    padding: 1px;
    width: 270;
    height: 128px;
}

.darken {
    filter: alpha(opacity=1); /* internet explorer */
    -khtml-opacity: 0.1;      /* khtml, old safari */
    -moz-opacity: 0.1;       /* mozilla, netscape */
    opacity: 0.2;           /* fx, safari, opera */
    -webkit-transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing-function: linear, ease-in, ease-out;
}

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); 
}

This is my jQuery code:

$("#all").on("click", { name: "Alle" }, activateCategory);
$("#eating").on("click", { name: "Essen Trinken" }, activateCategory);
$("#it").on("click", { name: "IT Technik" }, activateCategory);
$("#celebrate").on("click", { name: "Einladen Feiern" }, activateCategory);
$("#education").on("click", { name: "Ausbildung Kultur" }, activateCategory);

function activateCategory(event) {
    if (event.data.name != "Alle") {
        $('li').each(function() {
            //alert("Event: " + event.data.name + "\nTag: " + $(this).data('tags'));
            if ($(this).data('tags') != event.data.name) {
                //alert("treffer in Kategorie " + event.data.name);
                $(this).stop(true,true).addClass("darken",100);
                $(this).append('<div class="overlay"></div>');
            }
            else {
                $(this).stop(true,true).removeClass("darken",100);
                $(this).find('div').remove();
            }
        });
    }
    else {
        $('li').each(function() {
            $(this).removeClass("darken",100);
            $(this).find('div').remove();
        });
    }
}

Can anybody help me please with these issues?

Answer 1

well on this tag

<li data-tags="Einladen Feiern"><a href="#"><img class="resizableImage" width="270" height="128" src="img/shots/6.jpg" alt="Illustration"><br></a><p class="description"><a href="#">Feiern</a><br>Beschreibung</p></li>

your width in css is

width: 270;

when it should be

width: 270px;

the full css for that is

div li {
   float: left;
   padding: 1px;
   width: 270px;
   height: 128px;
}

also if something isn't smooth, its probably a rendering issue with the browser and not a lot you can do about it.