[Webkit-unassigned] [Bug 78319] New: -webkit-box-reflect reflect invalid in tag #coverflow img when build webkit mode cairo

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=78319

           Summary: -webkit-box-reflect reflect invalid in tag #coverflow
                    img when build webkit mode cairo
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows XP
            Status: UNCONFIRMED
          Severity: Critical
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: huynhthanhthanh596 at gmail.com


Dear all,
  I have a file styles.css using -webkit-box-reflect in #coverflow img such below:


body{font-family:verdana;font-size:90%;background:#fefefe;}

.clear{clear:both;}
#page{display;block;width:960px;}

#main-tab{margin-right:240px;display:block;}

.content{display:block;}

#sidebar{float:right;width:240px;background:#fff;}

#sidebar .panel{margin:2px;font-size:12px;}

#sidebar .panel .title{font-size:13px;font-weight:bold;/*background:url(img/panel_bg.png) 0 0*/;background:#FF6600;color:#fff;padding:5px;position:relative;}

#sidebar .panel .title .icon-expanded,#sidebar .panel .title .icon-collapsed{
    background:url(img/bullet.png);width:25px;height:15px;
    float:right;cursor:pointer;
}
#sidebar .panel .title .icon-expanded {background-position: 25px 0;}
#sidebar .panel .title .icon-collapsed {background-position: 0 30px;}
#sidebar .panel .content{padding:5px;border:1px solid #efefef}
#sidebar .projects ul{list-style:none}
#sidebar .projects li{margin-bottom:5px;}
#sidebar .projects li h3{font-size:12px;font-weight:bold;color:#000;margin:2px 0px;}
#sidebar .projects li .status{width:100%;}
#sidebar .projects li .progress {display:block;border:1px solid #efefef;}
#sidebar .projects li .progress .current{height:10px;background:#A6BD4D;}
#sidebar .projects li .progress .red{background:red;}
#sidebar .projects li .progress .green{background:green;}
#sidebar .projects li .progress .blue{background:blue;}
#sidebar .projects .download{margin:0px 5px;}

#sidebar .account a{text-decoration:none;color:#0563A7}
#sidebar .account a:hover{text-decoration:underline;}

#sidebar .events ul{list-style:none;}
#sidebar .events .content{padding:0px}
#sidebar .events li{padding:5px 5px 5px 18px;color:#000;;}
#sidebar .events li a{text-decoration:none;color:#000;}
#sidebar .events li a:hover{text-decoration:underline;}
#sidebar .events li.odd{background:url(img/bullet.gif) no-repeat 5px 8px #fff;}
#sidebar .events li.even{background:url(img/bullet.gif) no-repeat 5px 8px #efefef;}

#main-tab .content{width:100%;display:block;font-size:80%;background:#fff;}
#main-tab .tab{overflow:hidden;margin:0px;list-style:none;}
#main-tab .tab li{display:inline-block;*display:inline;zoom:1;margin: 0px;border:1px solid #fff;border-bottom:none;}
#main-tab .tab li.last{border-right-width:0px;}
#main-tab .tab li a{display:block;padding:5px 10px;text-align:center;background:#efefef;text-decoration:none;color:#000;font-size:12px;font-weight:bold;}
#main-tab .tab li a:hover,#main-tab .tab li a.active{background:#FF6600;color:#fff;}
#main-tab .tab li.last.active{border-right-width:1px;}
#main-tab .tab li.active{top:1px;padding-top:5px;position:relative;}

#messages,#friends{border:1px solid #FF6600;display:block;}
#messages .window{background:#eee;display:table-cell;width:10000px;}
#messages .window .message{display:block;}
#messages .window .message em.nick{font-weight:bold;}
#messages .window .message ul{list-style:none;background:#fff;}
#messages .window .message ul li{border-bottom:1px solid #FF6600;background:#eee;padding:2px 2px 6px 2px;margin-top:1px}
#messages .window .message ul li.last{border:none;}
#messages .window .form{display:block;width:100%;text-align:center;}
#messages .window .form .text{border:1px solid #ddd;padding:2px 2px;width:100%;border-right:none;border-left:none;}
#messages .nick-list{float:right;width:200px;border-left:1px solid #ddd;height:150px;}

#friends {padding:2px;}
#friends ul {list-style:none;}
#friends ul li{float:left;width:238px;height:50px;margin-bottom:5px;}
#friends ul li:hover{background:#efefef;}
#friends ul li a{text-decoration:none;color:#000;}
#friends ul li a:hover{text-decoration:underline;}
#friends ul li a.img{width:50px;margin-right:10px;float:left;}
#friends ul li div.nick-name{width:10000px;display:table-cell;font-weight:bold;}

#banner{height:450px;width:720px;overflow:hidden;background:#000;margin-right:240px;display:block;}
#slider{margin-top:5px;height:5px;display:none;}


div.wrapper {
    height: 400px;
    width: 720px; /*600*/
    padding: 10px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;

}

#imageCaption {
    margin:8px auto 0;
    width: 500px;
    color: white;    
    display: block;
    font-size: 13px;
    text-align: center;
    font-weight:bold;
}
#imageCaption a{color:#F60;text-decoration:none;}

#coverflow {
    display: inline-block;
    height: 550px;
    width: 2600px;

    padding: 42px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin-top: 40px;
}

#coverflow img {
    width: 260px;
    height: 260px;
    float: left;
    position: relative;
    margin: -35px;
    -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(black), color-stop(.7, black), to(transparent));
}


When I using mouse hover over some places near these cover images then reflecting wrong such as the image attachment.

Please help me.
Many Thanks

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.