Strange Dragging Behavior with "transform: translate"

[RealityRipple]

I noticed that the translate CSS function does some weird location calculations for dragged text, which I figured should be mentioned. Here's some quick demo code to illustrate the issue:

Code: Select all

  <style>
   .testBox
   {
    display: inline-block;
    width: 250px;
    margin: 25px;
    padding: 25px;
    border: 1px dashed #FF4040;
    background-color: #FFA0A0;
    text-align: center;
    user-select: all;
   }
   #translatedBox
   {
    transform: translate(50%, 250%);
   }
  </style>
  <div class="testBox">Select and drag this text</div>
  <div class="testBox" id="translatedBox">Select and drag this text</div>

Throw it in codepen or something and try highlighting and dragging text from one or both boxes.

Off-topic:
Yes, I know user-select doesn't work like I wanted on Pale Moon, either, but I kept it in for quicker comparison when using other browsers.

Depending on how much text you select, you can see some pretty interesting positioning get calculated for the second box. Definitely not a showstopper, but it is rather... unexpected. Especially since selecting everything ends up fixing the positioning again, once the container styling is dragged along with the text.