CSS3 android Phonegap问题

时间:2013-10-03 20:10:04

标签: android css3 cordova margin steroids

在此之前,是的,我一直在寻找,但我一无所获。我在一个应用程序中使用html / css3与类固醇和phonegap。正如我所说,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时,问题会发生,但是当它没有加载时它不会。但仍然无法找到原因!

1 个答案:

答案 0 :(得分:0)

似乎删除了jquery mobile就可以了。相反,我使用轻击事件hammer.js以防任何人介入相同的问题;)