为什么我的marge定义会在iPad上占据整个宽度

Question

我已经明确定义了参数和函数，但是由于某种原因，我的typewrite__clip在加载时占据了整个宽度。下图，然后该线在与'of'相同的平面上弹出，并且红色条不再位于右侧。

有人知道解决办法是什么吗？

这是CSS和jQuery

<script>
	// Jquery TypeWriter
	// Jquery TypeWriter
  // Jquery TypeWriter

  (function ($) {

    var defaultsParams = {
        speed: 1000,
        delay: 2000,
        marge: 10
    };

    $.fn.typewriter = function (options) {
        var $this = $(this);

        return this.each(function () {
            $this = $(this);

            new TypeWriter($this, options);
        });
    };

    function TypeWriter(element, options) {
        this.element = element;
        this.params = defaultsParams;
        this.nextWord = null;

        $.extend(this.params, defaultsParams, options);
        this.init();
    }

    /**
     * Init classes
     */
    TypeWriter.prototype.init = function () {
        this.element.find('p:not(:first)').addClass('u-invisible');
        this.element.find('p:first').addClass('u-visible');

        this.activeItem = this.nextWord = this.getVisibleItem();
        this.showWord(0);
    };

    /**
     * Show word
     * @param initSpeed
     */
    TypeWriter.prototype.showWord = function (initSpeed) {
        var _this = this,
            width = this.nextWord.width(),
            speed = (initSpeed != undefined) ? initSpeed : this.params.speed;

        this.activeItem = this.nextWord;

        this.element.animate({
            width: width + this.params.marge + 'px'
        }, speed, function () {
            setTimeout(function () {
                _this.hideWord();
            }, _this.params.delay);
        });
    };

    /**
     * Hide word
     */
    TypeWriter.prototype.hideWord = function () {
        var _this = this;
        this.nextWord = this.getNextWord();

        this.element.animate({
            width: '0px'
        }, this.params.speed, function () {
            _this.updateClasses();
            _this.showWord();
        });
    };

    /**
     * Return Active item
     * @returns {*}
     */
    TypeWriter.prototype.getNextWord = function () {
        return (this.activeItem.is(':last-child')) ? this.element.children().eq(0) : this.activeItem.next();

    };

    /**
     * Switch classes
     */
    TypeWriter.prototype.updateClasses = function () {
        this.nextWord.addClass('u-visible').removeClass('u-invisible');
        this.activeItem.addClass('u-invisible').removeClass('u-visible');
    };

    /**
     * Get current active item
     */
    TypeWriter.prototype.getVisibleItem = function () {
        return this.element.find('p:visible').first();
    };

})(jQuery);

$('.js-typewriter').typewriter();

  </script>

    .type{
    padding-top: 3.245em;
    margin-left: -5em;
    }

    .type h1{
    color: white;
    font-family: 'Chivo', sans-serif;
    font-size: 70px;
    display: inline;
    line-height: 1em;
    }

    .typewriter__clip {
    width: auto;
    color: white;
    font-family: 'Domine', serif;
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding-left: 6px;
    border-right: 6px solid #ed2024;
    margin-left: 1em;
    margin-bottom: -1em;
    }

    .typewriter__clip p {
    position: absolute;
    font-size: 55px!important;
    top: 0;
    left: 0;
    line-height: 65px;
    letter-spacing: -1px;
    white-space: nowrap;
    }

    .typewriter__clip p.u-visible {
    position: relative;
    }

    .u-invisible {
    opacity: 0;
    }

    .u-visible {
    opacity: 1;
    }

<div class="type">
<h1>The art + science
of</h1>
<div class="typewriter__clip js-typewriter">

acquiring new residents

promoting awesome activites

keeping families informed

showcasing delicious menus

enriching a resident's life

making the ultimate impression

</div>
</div>