jquery中的可调整大小的方法具有大数字的奇怪行为

Question

当您尝试向孩子左侧调整大小时，我有以下示例以奇怪的方式工作。

任何可能出错的想法？​​

$(document).ready(function($) {
  
  var $parent = $('div.parent');

  $parent.find('.child').resizable({
    handles:  'e, w'
  });
  
});

@import url("//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.min.css");

@left: 15000000px;

.wrapper{
  width: 300px;
  height: 40px;
  overflow: hidden;
  position: relative;
  border: 1px solid red;
  top: 50px;
  left: 60px;
}

.parent {
      position: absolute;
      left: -15000000px;
      width: 1500000000px;
      height: 40px;
      background-color: grey;
}

.child {
        position: absolute;
        left: 15000050px;
        width: 50px;
        height: 100%;
        background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper">
    <div class="parent">
       <div class="child">

       </div>
    </div>
</div>

Answer 1

显然jQuery本身存在问题，css函数没有得到正确的值。

＆＃13;

＆＃13;

$(document).ready(function($) {
  
  var $parent = $('div.parent');
  var child = $parent.find('.child');

  child.css('left', Math.pow(15,15));

  console.log('from jQuery css get',child.css('left'));
  console.log('from javascript DOM',child[0].style.left);
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper">
    <div class="parent">
       <div class="child">

       </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是由于您在父母身上使用left: -15000000px而在孩子身上left: 15000050px非常奇怪。如果您仅在 上设置left: 50px，则调整大小正常。

$(document).ready(function($) {
  var $parent = $('div.parent');

  $parent.find('.child').resizable({
    handles: 'e, w'
  });
});

@import url("//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.min.css");
@left: 15000000px;
.wrapper {
  width: 300px;
  height: 40px;
  overflow: hidden;
  position: relative;
  border: 1px solid red;
  top: 50px;
  left: 60px;
}

.parent {
  position: absolute;
  width: 1500000000px;
  height: 40px;
  background-color: grey;
}

.child {
  position: absolute;
  left: 50px;
  width: 50px;
  height: 100%;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>