El elemento arrastrable de la interfaz de usuario de JQuery deja rastros extraños en Chrome

Question

Sep 10, 2012, 11:30 AM

El elemento arrastrable de la interfaz de usuario de JQuery deja rastros extraños en Chrome

Estoy tratando de hacer mi primera extensión de cromo aquí. Es un tablero de notas adhesivas. Pero cuando intento arrastrar el primer elemento en mi tablero utilizando JQueryUI, deja líneas horizontales como trazas en cromo.

Aquí hay una captura de pantalla.

Aquí está el código.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sticky notes using CSS3 and Google Fonts (Step 5)</title>
<link  href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css"> 
<style type="text/css">

body{
  font-family:arial,sans-serif;
  font-size:100%;
  background:#666;
  color:#fff;
}
h2,p{
  font-size:100%;
  font-weight:normal;
}
ul,li{
  list-style:none;
}
ul{
  overflow:hidden;
  padding:3em;
}
ul li div{
  color:#000;
  background:#ffc;
  min-height:10em;
  min-width:10em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
ul li{
  margin:1em;
  float:left;
}
ul li h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
ul li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}
ul li div{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
ul li:nth-child(even) div{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) div{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
ul li:nth-child(5n) div{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
ul li div:hover,ul li div:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
ol{text-align:center;}
ol li{display:inline;padding-right:1em;}
ol li div{color:#fff;}
</style>
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery-ui-1.8.23.custom.min.js"></script>
<script src="step.js"></script>
</head>
<body>
  <ol>
    <li><a href="step1.html">Step #1</a></li>
    <li><a href="step2.html">Step #2</a></li>
    <li><a href="step3.html">Step #3</a></li>
    <li><a href="step4.html">Step #4</a></li>
    <li><strong>Step #5</strong></li>
    <li><a href="#"></a></li>
  </ol>
  <ul>
    <li >
      <div class="dragable">
        <h2>Title #1</h2>
        <p >Text Content #1</p>

      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #3</h2>
        <p>Text Content #3</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #4</h2>
        <p>Text Content #4</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #5</h2>
        <p>Text Content #5</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #6</h2>
        <p>Text Content #6</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #7</h2>
        <p>Text Content #7</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #8</h2>
        <p>Text Content #8</p>
      </div>
    </li>
  </ul>
</body>
</html>

y el javascript

$(document).ready(function() {
    $(function() {
        $(".dragable").draggable().bind('click', function(){
          $(this).focus();
        });
    });

    $('.dragable').bind('click', function() {
        $(this).attr('contenteditable', 'true');
    }).blur(
        function() {
            $(this).attr('contenteditable', 'false');
        });
})

Nota: después de algunos experimentos, descubrí que el problema es con -webkit-transform. Si los comento, el problema no aparece.