CSS3 android Phonegap issue

StackOverflow https://stackoverflow.com/questions/19168346

Question

Before anything, yes, i´ve been searching and i´ve found nothing. Im working in a app making use of html/css3 with steroids and phonegap. As i readed, android doesn´t support hardware accelerated javascript animations. The only way its using any css animations. I´ve succesfully used translate3d and its smooth a lot the animation but i steped with an issue. The whole content gets a margin pushing it to the left-top. its a small line but its really anoying me and i would really like to remove it. Im really stucked here i would really apreciate any help or any clue. thanks a lot for taking the time to decode my message :) (im not a native english speaker).

http://imageshack.us/a/img266/92/3m50.png http://imageshack.us/a/img96/46/hu8t.png

first image its before the animation. second, after. In the second image you cant see the border that im talking about, at the top of the page because the header element and the background are of the same color. but its still there! thanks a lot!

EDIT

<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>

its also happens with translate3d!

EDIT

I´ve already found out whats its giving that left border. When i use jquery mobile the issue happen but when its not loaded its does not. But still cant find out why!

Was it helpful?

Solution

It seems removing jquery mobile did the trick. Instead im using for swipe events hammer.js in case anyone steps in with the same problem ;)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top