Bug 78319 – -webkit-box-reflect reflect invalid in tag #coverflow img when build webkit mode cairo

• Component: Layout and Rendering
• Status: RESOLVED WONTFIX

[ThanhHuynh]

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

[ThanhHuynh]

Created attachment 126439 [details]
When mouse hover on some places near box cover images, reflecting is wrong

[Ahmad Saleem]

We don't have any test case to reproduce this bug and if we have this bug, it might have been resolved.

Additionally, if we have any bug, we might have newer bug report with test case as well.

Marking this as 'RESOLVED WONTFIX' because it was never confirmed.