Bug 78319 - -webkit-box-reflect reflect invalid in tag #coverflow img when build webkit mode cairo
Summary: -webkit-box-reflect reflect invalid in tag #coverflow img when build webkit m...
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows XP
: P2 Critical
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-02-09 19:54 PST by ThanhHuynh
Modified: 2024-03-18 18:41 PDT (History)
1 user (show)

See Also:


Attachments
When mouse hover on some places near box cover images, reflecting is wrong (138.31 KB, image/jpeg)
2012-02-09 19:58 PST, ThanhHuynh
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description ThanhHuynh 2012-02-09 19:54:09 PST
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
Comment 1 ThanhHuynh 2012-02-09 19:58:41 PST
Created attachment 126439 [details]
When mouse hover on some places near box cover images, reflecting is wrong
Comment 2 Ahmad Saleem 2024-03-18 18:41:09 PDT
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.