Problems with 'People' (Simple Presentation) plug-in on Internet Explorer browsers

WMKPeter

I have been getting reports that the 'People' plug-in does not display properly on Internet Explorer browsers. I have been told that when someone mouses over one of the squares, they will flip around, but the content cannot be seen.

For example, we are using the 'People' plug-in to display water facts. They can see the icons on all the tiles, but when they mouse over the tiles, there is no content on the back. This has been reported as an issue on Internet Explorer 10 & 11 thus far. Is there a workaround or fallback we can implement?

surgeon

Hello and thank You for the report.
I'll fix that ASAP and will send to You a fallback code before the update release.

surgeon

Hello again.

this is fallback css definition for IE10. Please paste it in Chillout Options >> Custom Style.

/*SPECIAL HACK FOR IE10*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    
    .people_item.simple:hover .people_flip {

        z-index: 999999;
        transform: none;
    }
    .people_flip{
        -webkit-perspective:1000px;
        perspective:1000px;
        
        height: 100%;
        width: 100%;
    }
    .people_item.simple .people_img{
        width: 100%;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        margin: 0;
        -webkit-transform: perspective( 1000px ) rotateY ( 0deg );
        transform: perspective( 1000px ) rotateY( 0deg );
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .people_item.simple .people_img_overlay{
        font-size: 12px;
        height: calc(100% - 40px);
        opacity: 0;
        position: absolute;
        padding: 20px;
        top: 0;
        width: calc(100% - 40px);
        box-shadow: 0 0 25px 0 #dcdcdc;
        outline: medium none;    
        -webkit-transform: perspective( 1000px ) rotateY(180deg);
        transform: perspective( 1000px ) rotateY( 180deg );
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transition: all 1s ease;
        transition: all 0.5s ease;
    }
    
    .people_flip:hover .people_img{
        -webkit-transform: perspective( 1000px ) rotateY(180deg);
        transform: perspective( 1000px ) rotateY( 180deg );
    }
    
    .people_flip:hover .people_img_overlay{
        -webkit-transform: perspective( 1000px ) rotateY(0deg);
        transform: perspective( 1000px ) rotateY( 0deg );
    }
}