i think i find a bug in chrome browser
34 views
Skip to first unread message
10166...@qq.com
Sep 18, 2011, 12:31:57 PM9/18/11
to Chromium Accessibility, 10166...@qq.com
hello ！ i am a big fan of chrome . i love it because it is the best
browser i have ever met .it is beautiful,it is fast,it support html5
and css3 very well.but lately i write a webpage .and when i open it in
chrome,it performed very bad. then i tried my webpage in other
browsers .to my surprise all the browsers i have ,safari for windows
included ,can perform the webpage smoothly except chrome.i have
pasted my html code below . and i think the bug has something to do
with javascript .
follow those steps you can see the bug：
1 open my webpage in your chrome and see how it works
2 find some images in your computer to replace mine and then
see how it works in your chrome
3 save my webpage with your images and open it in safari，opera，
firefox，and ie9 to see how it works in those browsers
you will find something wrong hope you can resolve it in the later
version of chrome
here is my html code：
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js">
</script>
<script type="text/javascript">
function getInfo()
{
var k=window.screen.width;
}
getInfo();
$(document).ready(function(){
function getInfo(){
var w=document.body.clientWidth;
var h=document.body.clientHeihgt;
var d=0.037*w;
var x=0
$(".inbox").css("width",0.732*w);
$(".inbox").css("margin-left",0.037*w);
$("#to img").css("width",w/10);
$("#to").css("width",w/10);
$("#start").click(function(){
if(x+0.732*w+2*0.037*w<0.732*w-100){
$("#box").animate({left:x+0.732*w+2*0.037*w},"slow");
/* $("#box").animate({width:300},"fast");
$("#box").animate({height:100},"fast");
$("#box").animate({width:200},"fast");*/
{x=x+0.732*w+2*0.037*w}
}
else{}
})
$("#start2").click(function(){
if(x-0.732*w-2*0.037*w>-3500){
$("#box").animate({left:x-0.732*w-2*0.037*w},"slow");
/* $("#box").animate({width:300},"fast");
$("#box").animate({height:100},"fast");
$("#box").animate({width:200},"fast");*/
{x=x-0.732*w-2*0.037*w}
}
else{}
});
}getInfo();
});
</script>
<style type="text/css">
#start2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 546px;
top: 444px;
background-color: #3366FF;
}
body {
background-color: #000;
overflow: hidden;
}
.inbox{
height:100%;
float:left;
padding:20px;
-webkit-box-shadow:0 0 10px #333;
-0-box-shadow:0 0 10px #333;
-moz-box-shadow:0 0 10px #333;
}
#first{
}
#to{
width:100px;
height:auto;
background:#FFF;
border:solid #F00;
-webkit-box-shadow:0 0 10px #F00;
}
.display{
float:left;
}
</style>
<title>jqueryaimate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="height:500px; left:0px; width:3400px; position:relative;
background-color: #0033CC; layer-background-color: #0033CC; border:
1px none #000000;">
<div id="first" class="inbox">
<p id="oo" class="display"><img src="images/b2/未标题-5.jpg" width="100"
></p>
<p id="ot" class="display"><img src="images/b2/未标题-5.jpg" width="100"
></p>
<p id="oth" class="display"><img src="images/b2/未标题-5.jpg"
width="100" ></p>
<p id="of" class="display"><img src="images/b2/未标题-5.jpg" width="100"
></p>
<p id="ofi" class="display"><img src="images/b2/未标题-5.jpg"
width="100" ></p>
</div>
<div id="second" class="inbox">
<p id="to"><img src="images/b2/未标题-5.jpg" width="100" ></p>
</div>
<div id="third" class="inbox">
</div>
</div>
<div id="start2"></div>
</body>
</html>
browser i have ever met .it is beautiful,it is fast,it support html5
and css3 very well.but lately i write a webpage .and when i open it in
chrome,it performed very bad. then i tried my webpage in other
browsers .to my surprise all the browsers i have ,safari for windows
included ,can perform the webpage smoothly except chrome.i have
pasted my html code below . and i think the bug has something to do
with javascript .
follow those steps you can see the bug：
1 open my webpage in your chrome and see how it works
2 find some images in your computer to replace mine and then
see how it works in your chrome
3 save my webpage with your images and open it in safari，opera，
firefox，and ie9 to see how it works in those browsers
you will find something wrong hope you can resolve it in the later
version of chrome
here is my html code：
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js">
</script>
<script type="text/javascript">
function getInfo()
{
var k=window.screen.width;
}
getInfo();
$(document).ready(function(){
function getInfo(){
var w=document.body.clientWidth;
var h=document.body.clientHeihgt;
var d=0.037*w;
var x=0
$(".inbox").css("width",0.732*w);
$(".inbox").css("margin-left",0.037*w);
$("#to img").css("width",w/10);
$("#to").css("width",w/10);
$("#start").click(function(){
if(x+0.732*w+2*0.037*w<0.732*w-100){
$("#box").animate({left:x+0.732*w+2*0.037*w},"slow");
/* $("#box").animate({width:300},"fast");
$("#box").animate({height:100},"fast");
$("#box").animate({width:200},"fast");*/
{x=x+0.732*w+2*0.037*w}
}
else{}
})
$("#start2").click(function(){
if(x-0.732*w-2*0.037*w>-3500){
$("#box").animate({left:x-0.732*w-2*0.037*w},"slow");
/* $("#box").animate({width:300},"fast");
$("#box").animate({height:100},"fast");
$("#box").animate({width:200},"fast");*/
{x=x-0.732*w-2*0.037*w}
}
else{}
});
}getInfo();
});
</script>
<style type="text/css">
#start2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 546px;
top: 444px;
background-color: #3366FF;
}
body {
background-color: #000;
overflow: hidden;
}
.inbox{
height:100%;
float:left;
padding:20px;
-webkit-box-shadow:0 0 10px #333;
-0-box-shadow:0 0 10px #333;
-moz-box-shadow:0 0 10px #333;
}
#first{
}
#to{
width:100px;
height:auto;
background:#FFF;
border:solid #F00;
-webkit-box-shadow:0 0 10px #F00;
}
.display{
float:left;
}
</style>
<title>jqueryaimate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="height:500px; left:0px; width:3400px; position:relative;
background-color: #0033CC; layer-background-color: #0033CC; border:
1px none #000000;">
<div id="first" class="inbox">
<p id="oo" class="display"><img src="images/b2/未标题-5.jpg" width="100"
></p>
<p id="ot" class="display"><img src="images/b2/未标题-5.jpg" width="100"
></p>
<p id="oth" class="display"><img src="images/b2/未标题-5.jpg"
width="100" ></p>
<p id="of" class="display"><img src="images/b2/未标题-5.jpg" width="100"
></p>
<p id="ofi" class="display"><img src="images/b2/未标题-5.jpg"
width="100" ></p>
</div>
<div id="second" class="inbox">
<p id="to"><img src="images/b2/未标题-5.jpg" width="100" ></p>
</div>
<div id="third" class="inbox">
</div>
</div>
<div id="start2"></div>
</body>
</html>
Dominic Mazzoni
Sep 18, 2011, 11:56:43 PM9/18/11
to 10166...@qq.com, Chromium Accessibility
This is the wrong mailing list, but I filed your bug here: http://code.google.com/p/chromium/issues/detail?id=97059 - in the future, please file bugs directly on that site rather than posting them here.
It would be helpful if you could post a smaller example that demonstrates the problem, even better if you could provide a complete zip file with all needed scripts, images, etc. - otherwise a developer has to find a bunch of images, download the right version of jquery, and spend a while getting your code to work just to debug it.
- Dominic
Reply all
Reply to author
Forward
0 new messages