safari浏览器textarea标签的placeholder多行时显示不全

问题：使用textarea标签时，placeholder的内容很长，会换行，首次显示正常，当输入内容后，在清除，就会只显示placeholder的第一行内容，其之后的就看不到了
解决方案：使用js动态的重绘textarea标签，来使placeholder显示完成
调试解决：通过调试我发现，清除内容后，展示的placeholder只有一行，j经过反复调试属性，发现和textarea标签的重绘有关系，我感觉应该是重绘没有完成，就手动的添加了一个position = ‘relative’，发现就正常了，解决代码如下

解决方案代码：
我的项目是个vue项目

<template>
    <div>
        <textarea class="__textarea"
                  ref="textarea"
                  v-bind:value="value"
                  v-on:input="updateValue($event.target.value)"
                  :placeholder="placeholder"></textarea>
    </div>
</template>
<script>
export default {
    methods: {
        updateValue: function (value) {
            if (value === '') {
                this.placeholderShowBug()
            }
            this.provetext = value;
            var formattedValue = value;
            if (formattedValue !== value) {
                this.$refs.textarea.value = formattedValue
            }
            // 通过 input 事件发出数值
            this.$emit('input', formattedValue)
        },
        placeholderShowBug () {
            if (document.querySelector('.__textarea').style.position !== 'relative') {
                document.querySelector('.__textarea').style.position = 'relative'
            } else {
                document.querySelector('.__textarea').style.position = 'static'
            }
        }
    },
};
</script>

网上有设置textarea的fontSize大于placeholder的fontSize的方法，测试结果如下
设置textarea的fontSize的方法有两种情况是可以显示完全
1、textarea的fontSize是placeholder的fontSize的倍数，要显示几行就是几倍，可以显示完全
2、当placeholder的内容很多会异常文本框显示的时候，也可以正常显示

textarea {
    font-size: 12px;
}
textarea::-webkit-input-placeholder {
    font-size: 11px;
}
textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: 11px;
}
textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: 11px;
}
textarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-size: 11px;
}