在任何事情之前，是的，我一直在寻找，但我什么也没找到。我正在使用带有类固醇和phonegap的html / css3的应用程序。正如我所读到的，android 不支持硬件加速的 javascript 动画。它使用任何 css 动画的唯一方法。我已经成功地使用了 translate3d 并且它的动画非常流畅，但是我遇到了一个问题。整个内容有一个边距，将其推到左上角。这是一条小线，但它真的让我很烦恼，我真的很想删除它。我真的被困在这里，我真的很感激任何帮助或任何线索。非常感谢您花时间解码我的信息:)（我不是以英语为母语的人）。
http://imageshack.us/a/img266/92/3m50.png http://imageshack.us/a/img96/46/hu8t.png
第一张图片是在动画之前。第二，之后。在第二张图片中，您在页面顶部看不到我所说的边框，因为标题元素和背景颜色相同。但它仍然存在！多谢！
编辑
<head>
<link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />
<link rel="stylesheet" href="stylesheets/application.css" />
<script src="javascripts/onerror.js"></script>
<script src="javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/appgyver/cordova.js"></script>
<script src="components/steroids-js/steroids.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.transit.min.js" ></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/jquery.knob.js"></script>
<plugin name="Notification" value="org.apache.cordova.Notification"/>
<style>
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5 {
margin : 2% 0px;
}
body {
margin: 0px;
overflow: hidden;
background : #4bc0d1;
}
#wrapper {
width: 100%;
height: 100%;
position: fixed;
left:0px;
top: 0px;
background : #4bc0d1;
}
#header {
width: 100%;
height: 10%;
top: 1%;
background : #4bc0d1;
position: fixed;
margin: 0xp;
}
.head-element {
margin-top: -5px;
float: left;
height: 100%;
}
#first {
width: 20%;
}
#first img {
height: 100%;
}
#second {
width: 60%;
margin-top: 2%;
}
#second img {
width : 100%;
}
#third {
width: 20%;
}
#third img {
height: 100%;
float:right;
}
#body {
width:100%;
height: 75%;
position:fixed;
top: 10%;
background:#e4e4e4;
}
#footer {
height: 15%;
position:fixed;
top: 85%;
background: black;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
#menu-left {
width: 100%;
height: 100%;
top: 10%;
position:fixed;
left: 100%;
z-index: 1000;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
#menu-right {
width: 100%;
height: 100%;
top: 10%;
left : -100%;
position:fixed;
z-index: 1000;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.body-text {
width:100%;
text-align: center;
color: #aaa;
}
.body_button {
margin: 0px auto;
height: 40%;
}
#button-background {
position: absolute;
width:100%;
height: 100%;
z-index: -10;
}
#button {
width: 96%;
height: 96%;
background: -moz-linear-gradient(top, #f5f6f8 0%, #b9bdc8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f8), color-stop(100%,#b9bdc8));
background: -webkit-linear-gradient(top, #f5f6f8 0%,#b9bdc8 100%);
background: -o-linear-gradient(top, #f5f6f8 0%,#b9bdc8 100%);
background: -ms-linear-gradient(top, #f5f6f8 0%,#b9bdc8 100%);
background: linear-gradient(to bottom, #f5f6f8 0%,#b9bdc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f8', endColorstr='#b9bdc8',GradientType=0 );
border-radius: 50%;
box-shadow: 0px 6px 17px rgba(54, 50, 50, 0.73);
}
.button-normal {
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(151,152,160,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(151,152,160,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 40%,rgba(151,152,160,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#9798a0',GradientType=0 );
}
.button-hover {
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(151,152,160,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(151,152,160,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#9798a0',GradientType=1 );
}
#button-inner {
width: 100%;
height: 100%;
box-shadow: 1px 37px 30px rgba(54, 50, 50, 0.29);
border-radius: 50%;
}
#dialog {
width:85%;
margin: 5% auto;
border-radius: 30px;
height: 25%;
text-align: center;
}
#dialog-info {
margin:0px auto;
}
#dialog-info div{
float: left;
height:75%;
}
#dialog-info div:first-child{
margin-left:25%;
height: 50%;
}
#dialog-info div:nth-child(2){
margin-left: 5%;
}
#dialog-title {
color: #444
}
.img-height{
height: 100%;
}
#thefixer {
width: 2%;
height: 100%;
position:fixed;
background : #4bc0d1;
}
.onoffswitch {
position: relative; width: 95px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 0px;
height: 29px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 24px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Dem";
padding-left: 5px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "Pr";
padding-right: 5px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
width: 30px; margin: 0px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 0px;
position: absolute; top: 0; bottom: 0; right: 61px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
#animation-rotate {
transition: -webkit-transform 0.5s ease-in-out;
}
</style>
<script>
$(document).ready(function(){
$("#animation-rotate").css({
"webkitTransform" : "rotate(-45deg)"
});
});
</script>
</head>
<body style="padding:0px">
<div id="thefixer"></div>
<div id='wrapper' style="margin:0px; padding:0px;">
<div id='header' style="background: #4bc0d1">
<div class='head-element' id='first' >
<img src='images/image-left.png' />
</div>
<div class='head-element' id='second' >
<img src='images/head-image.png' />
</div>
<div class='head-element' id='third' >
<img id="image-notifications" src='images/image-right.png' />
</div>
</div>
<div id='body' >
<div class='body-text' >
<h2 id="textoreloco" >DDAVP</h2>
</div>
<div class='body-text' >
<h3>0,1mg</h3>
</div>
<div class='body_button' style="margin-top:2%">
<div id="red" style="position:absolute; z-index:-10; width: 100%; height: 100%;">
</div>
<div id="green" style="position:absolute; z-index:-10; width: 100%; height: 100%; display : none">
</div>
<div id="skin" style="position:absolute; z-index:-10; width: 100%; height: 100%; display: none">
</div>
<div id='button' style="position:absolute">
<div id="button-inner" class="button-normal" style="">
<div id="Ok" style=" padding-top: 26%; color: #444; ">
<h1 id="button-text" style="text-align: center; font-size: 4em;">Ok</h1>
</div>
</div>
</div>
</div>
<div id="dialog" style="display:none">
<div id="dialog-title">
<h3 id="tittle-text" >Dosis Fuera de Rango</h3>
</div>
<div id="dialog-info">
<div>
<img id="reloj" class="img-height" src="images/reloj_b.png" />
</div>
<div>
<h1 id="time-text">48HS</h1>
</div>
</div>
</div>
</div>
</div>
<div id='footer' style="width:200%; height: 15%">
<div style="width:50%; float: left">
<div style="height:100%; float: left;">
<div id="pPicture" style="height: 70%; padding: 2px; border-radius: 50%; margin-top:16%; margin-left: 13px; background: green">
<div id="animation-rotate" style="height: 100%; position: absolute; z-index: -1">
<div id="doctor-state" style="height:20px; width:20px; border-radius: 50%;
background: green; z-index:-1; margin-left: -2px; margin-top: -2px" ></div>
</div>
<img style="height: 100%;" src="images/profile-picture.png" />
</div>
</div>
<div style="height:100%; width: 65%; float: left">
<h3 style="color: white; margin-top: 4%; margin-left: 2%">Dra. Sibila Vane</h3>
<h4 style="color: #e4e4ff; margin-left: 3%" >Proxima Cita:</h4>
<h5 style="color: white; margin-left: 5%" >18.07.13 / 19:00Hs</h5>
</div>
<div id="footer-plus" style="height:100%; width: 10%; float: left;">
<img style="width:100%; margin-top: 80%;" src="images/mas.png" />
</div>
</div>
<div style="width:50%; float: left; height:100%">
<div id="footer-minus" style="height: 40%; margin-top: 8%; margin-left: 5%; float: left" >
<img style="height: 100%;" src="images/menos.png" />
</div>
<div style="height: 70%; margin-top: 4%; margin-right: 4%; float: right" >
<img style="height: 100%;" src="images/tel.png" />
</div>
<div style="height: 70%; margin-top: 4%; margin-right: 4%; float: right" >
<img style="height: 100%;" src="images/mail.png" />
</div>
<div style="height: 70%; margin-top: 4%; margin-right: 4%; float: right" >
<img style="height: 100%;" src="images/cita.png" />
</div>
</div>
<div style="clear:both" ></div>
</div>
它也发生在 translate3d 上！
编辑
我已经发现它赋予了左边框是什么。当我使用 jquery mobile 时会发生问题，但是当它未加载时不会。但是还是不知道为什么！