jquery "position().top" 和 css3 "transform: scale()" 之间的冲突

Question

我正在我的编辑工具中构建字体大小调整器，为此我将文本元素的原点更改为位于左下角。一切都适用于普通版本，但我正在尝试使其与使用 transform:scale(...) 的缩放功能一起使用：

这是正常版本，无论字体大小如何，文本始终保持在一行中：

$(document).on('change', '#fontsize', function() {
  var element = $(".element");
  var fontsize = $(this).val();
  var current_top = element.position().top;
  var height = element[0].getBoundingClientRect().height;
  var bottom = current_top + height;

  console.log('font-size=' + fontsize + ' top=' + current_top + ' height=' + height);

  element.css({
    "font-size": fontsize + 'px',
  }).css({
    top: (current_top - ((current_top + element[0].getBoundingClientRect().height) - bottom)) + 'px'
  })

});

.absolute {
  position: absolute;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid green;
}

.elements {
  background: #eaeaea;
  border: 1px solid red;
  position: relative;
  width: 300px;
  height: 140px;
}

.element {
  position: absolute;
  text-align: left;
  transform: rotate(0deg);
  left: 70px;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fontsize" type="text" placeholder="Type : '21', '23' or '28'">
<span>Press enter !</span>

<div class="elements">
  <span class="absolute" style="top: 65px; z-index:999;"></span>
  <div class="element" style="">Lindow</div>
</div>

这是使用 transform:scale(...) 的版本，正如您在此处看到的 element.position().top 做了一些奇怪的事情，文本不会停留在行的顶部，而是在每次输入更改时移动到其他地方.

$(document).on('change', '#fontsize', function() {
  var element = $(".element");
  var fontsize = $(this).val();
  var current_top = element.position().top;
  var height = element[0].getBoundingClientRect().height;
  var bottom = current_top + height;

  console.log('font-size=' + fontsize + ' top=' + current_top + ' height=' + height);

  element.css({
    "font-size": fontsize + 'px',
  }).css({
    top: (current_top - ((current_top + element[0].getBoundingClientRect().height) - bottom)) + 'px'
  })

});

.elements {
  transform:scale(1.5); 
  transform-origin:top left;
}

.absolute {
  position: absolute;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid green;
}

.elements {
  background: #eaeaea;
  border: 1px solid red;
  position: relative;
  width: 300px;
  height: 140px;
}

.element {
  position: absolute;
  text-align: left;
  transform: rotate(0deg);
  left: 70px;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fontsize" type="text" placeholder="Type : '21', '23' or '28'">
<span>Press enter !</span>

<div class="elements">
  <span class="absolute" style="top: 65px; z-index:999;"></span>
  <div class="element" style="">Lindow</div>
</div>

我想解决这个问题，出了什么问题，我应该使用什么？

Answer 1

当你改变一个元素的字体大小时，它会增加它的高度，并且使用绝对定位，你最好从它的 bottom 位置开始工作，而不是 top。

我简化了脚本并在 .element 规则中更改为 bottom: 72px。

注意，文字底部与绿线之间的空隙属于字体，随着字体大小的增加而增大。这是正常现象，基于字体的内部指标，字体类型之间也 can/will 不同。如果您还需要对此进行补偿，则需要测量所用字体的值并将其添加到您的计算中（请注意，这也可能因浏览器和操作系统而异）。

非缩放版本

$(document).on('change', '#fontsize', function() {
  var element = $(".element");
  var fontsize = $(this).val();
  
  console.log('font-size=' + fontsize);

  element.css({
    "font-size": fontsize + 'px',
  })

});

.absolute {
  position: absolute;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid green;
}

.elements {
  background: #eaeaea;
  border: 1px solid red;
  position: relative;
  width: 300px;
  height: 140px;
}

.element {
  position: absolute;
  text-align: left;
  transform: rotate(0deg);
  left: 70px;
  bottom: 72px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fontsize" type="text" placeholder="Type : '21', '23' or '28'">
<span>Press enter !</span>

<div class="elements">
  <span class="absolute" style="top: 65px; z-index:999;"></span>
  <div class="element" style="">Lindow</div>
</div>

缩放版

$(document).on('change', '#fontsize', function() {
  var element = $(".element");
  var fontsize = $(this).val();
  
  console.log('font-size=' + fontsize);

  element.css({
    "font-size": fontsize + 'px',
  })

});

.elements {
  transform:scale(1.5); 
  transform-origin:top left;
}

.absolute {
  position: absolute;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid green;
}

.elements {
  background: #eaeaea;
  border: 1px solid red;
  position: relative;
  width: 300px;
  height: 140px;
}

.element {
  position: absolute;
  text-align: left;
  transform: rotate(0deg);
  left: 70px;
  bottom: 72px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fontsize" type="text" placeholder="Type : '21', '23' or '28'">
<span>Press enter !</span>

<div class="elements">
  <span class="absolute" style="top: 65px; z-index:999;"></span>
  <div class="element" style="">Lindow</div>
</div>

已更新

如果还是要基于它的top值，需要得到scale()值，然后用新旧height的差值来调整top 值

$(document).on('change', '#fontsize', function() {
  var element = $(".element");
  var scale = (element[0].getBoundingClientRect().width / element[0].offsetWidth);  
  var fontsize = $(this).val();
  var top = element.position().top / scale;
  var height = element[0].getBoundingClientRect().height / scale;

  element.css({
    "font-size": fontsize + 'px',
  }).css({
    top: top - ((element[0].getBoundingClientRect().height / scale) - height) + 'px'
  })

});

.elements {
  transform:scale(1.5); 
  transform-origin:top left;
}

.absolute {
  position: absolute;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid green;
}

.elements {
  background: #eaeaea;
  border: 1px solid red;
  position: relative;
  width: 300px;
  height: 140px;
}

.element {
  position: absolute;
  text-align: left;
  transform: rotate(0deg);
  left: 70px;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fontsize" type="text" placeholder="Type : '21', '23' or '28'">
<span>Press enter !</span>

<div class="elements">
  <span class="absolute" style="top: 65px; z-index:999;"></span>
  <div class="element" style="">Lindow</div>
</div>

jquery "position().top" 和 css3 "transform: scale()" 之间的冲突

Conflict between jquery "position().top" and css3 "transform: scale()"

html

javascript

css

jquery

css-transforms