Tile Effect not working on firefox and ie

[Gaetano]

Hi guys,
I developing a website using tile effect to achieve a kinda of win8-like style.

I followed the example on kendo effect page and my tiles works pretty well on chrome..
the issue is that on other browser, when the tile slides to show its "back", the front is still visible...
I checked my code with the one from kendo and it seems the same...

this is my generalized javascript function to append a new tile

var rawDiv = $("<div>").append

(

     $("<div>").attr("id", idDiv).addClass("boxSlider " + other class).append (

             $("<span>").addClass("cover"),

             $("<span>").addClass("description")

     )

 )

  

return rawDiv.html();

while this is my css 

.boxSlider {

    display: inline-table;

    margin: 5px;

    overflow: hidden;

    position: relative;

}

 

    .boxSlider .cover {

        width: 100%;

        height: 100%;

        line-height: 100px;

        position: absolute;

        text-align: center;

        display: block;

        color: #fff;

        font-weight: bold;

        font-size: 18px;

    }

 

        .boxSlider .cover .bsFooter {

            width: 100%;

            font-size: 14px;

            line-height: 15px;

            bottom: 10px;

            margin: 0;

            position: absolute;

            text-transform: uppercase;

            font-weight: normal;

        }

 

    .boxSlider .description {

        display: none;

        width: 100%;

        height: 100%;

        position: absolute;

        font-size: 12px;

        color: #fff;

        overflow-y: auto;

    }

 

        .boxSlider .description span {

            display: block;

        }

 

        .boxSlider .description p {

            margin-left: 10px;

            max-width: 280px;

            min-width: 240px;

            float: left;

        }

and this is the effect

BoxSliderAnimation: function () {

        $(".boxSlider").hover(

           function (e) {

               var div = $(e.currentTarget);

               kendo.fx(div.find(".description").css("display", "block")).tile("left", div.find(".cover")).play();

           },

 

          function (e) {

              var div = $(e.currentTarget);

              kendo.fx(div.find(".description")).tile("left", div.find(".cover")).reverse();

          });

    },

I attached an image to show this behavior.

Thanks to all

[Alexander Valchev]

Hi Fabio,

Thank you for getting in touch with us.

I can confirm that the problem occurs in latest version of Firefox. We will log this as a bug and try to address it as soon as possible. Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
the Telerik team

[Gaetano]

Hi Alexander, 

I'm confused..If the issue is on the latest version of firefox, I should not be able to see this page correctly 
http://demos.kendoui.com/web/fx/tile.html (while I actually see it working fine)

and, by the way, I have the same issue with IE 9.

Thanks
Fabio

[Alexander Valchev]

Hello Fabio,

I was able to reproduce problem with the demos only with Firefox 18.0.1.
Here is a screen cast: http://screencast.com/t/M7qPV7r8F

On IE however, the effect seems to work as expected. Could you please check the screen cast and let me know what I am missing? Is it possible to send me a short video taken from your PC?

Best regards,
Alexander Valchev
the Telerik team

[Gaetano]

Hi Alexander,
Here the video from my pc..

the video shows the effect running on:
1) chrome - latest version
2) firefox - latest version
3) IE - 9 

if you need any other detail, let me know!

thank!

[Alexander Valchev]

Hello Fabio,

I am afraid that the attachment did not make it through. Could you please re-send the video. Note that the allowed extensions: zip, rar, ace, jpg, gif, css, png

In case you cannot attach the file (even after archiving it) please consider uploading it somewhere (YouTube, DropBox, etc) and providing a link. Thank you in advance.

Regards,
Alexander Valchev
the Telerik team

[Gaetano]

ops sorry...
I probably miss out the link... here it is:

http://www.screencast.com/t/AWQ2jzeXMJ

Thanks

[Alexander Valchev]

Hello Fabio,

I cannot reproduce the same problem in this demo with IE 9. As you correctly noted in the first post, your code is identical to the one from the demo page. Could you please provide a small but runnable example (probably in jsBin) which I can examine locally? What KendoUI version do you use? Demo page works with v2012.3.1315 (Q3 SP).

Regards,
Alexander Valchev
the Telerik team

[Gaetano]

Hi Alexander,
I'm using Kendo UI v2012.3.1114 (we are not really stuck on this version, it's just we started developing with that one)
The demo page works for me too..

here the sample of my page:

Example

Thanks
Fabio

[Kamen Bundev]

Hi Fabio,

The issue in IE is caused by the display: inline-table CSS property - for some reason inline-table stops overflow: hidden from working there. If you make .boxSlider inline-block, everything will work again:


Greetings,
Kamen Bundev
the Telerik team

[Gaetano]

Hi Kamen,
Thanks! now it works properly!!
And I just updated firefox to version 18.0.2, and with "inline-block" it works fine!!

thanks again
Fabio