JSFiddle - React, Tailwind, and code Playground

by jamessouth

HTML

<p>IE7 is calculating the wrong row count when the content is pasted.</p>
<textarea data-autosize=''></textarea>

CSS

[data-autosize] {
    overflow: hidden;
    -webkit-transition: border linear 0.3s, box-shadow linear 0.3s, height 0.3s linear;
    -moz-transition: border linear 0.3s, box-shadow linear 0.3s, height 0.3s linear;
    -ms-transition: border linear 0.3s, box-shadow linear 0.3s, height 0.3s linear;
    -o-transition: border linear 0.3s, box-shadow linear 0.3s, height 0.3s linear;
    transition: border linear 0.3s, box-shadow linear 0.3s, height 0.3s linear;
}

JavaScript

/*!
* Accelerate AutoSize v1.0.0
* Copyright (c) 2012,  James South.
* Dual licensed under the MIT or GPL Version 2 licenses.
*/

/*global jQuery*/
(function ($) {

    "use strict";

    // The AutoSize object that contains our methods.
    var AutoSize = function (element, options) {

        this.$element = $(element);

        // Initial setup.
        if ($.isPlainObject(options)) {
            var self = this,
                createClone = function () {

                    // Create a clone and offset it.
                    self.$clone = self.$element.clone()
                                   .css({ "position": "absolute", "top": "-9999px", "left": "-9999px" })
                                   .attr({ "tabindex": -1, "rows": 2 }).insertAfter(self.$element);

                };

            this.options = $.extend({}, $.fn.autoSize.defaults, options);

            $.when(createClone()).then(self.size());
        }
    };

    AutoSize.prototype = {
        constructor: AutoSize,
        size: function () {
            var transition = $.support.transition,
                $element = this.$element,
                element = this.$element[0],
                $clone = this.$clone,
                clone = $clone[0],
                height = 0,
                options = this.options,
                sizeEvent = $.Event("size.autosize.accelerate"),
                sizenEvent = $.Event("sizen.autosize.accelerate"),
                complete = function () {
                    $element.trigger(sizenEvent);
                };

            // Copy the text accross
            $clone.val($element.val());

            // Set the height so animation will work.
            $element.height($clone.height());

            // Shrink
            while (clone.rows > 1 && clone.scrollHeight < clone.offsetHeight) {
                clone.rows -= 1;
            }

            // Grow
            while (clone.scrollHeight > clone.offsetHeight && height !== clone.offsetHeight) {
...