Vuejs website: scrollTop for autoscrolling vertical is not working in iOS Safari

Question

i have a chatwidget which scrolls automatically if a new message comes in vertical to the bottom but not on mobile iOS Safari. The Scroll down code is this:

methods: {
            scrollDown: function(){
                if (!this.isLoadingHistory) {
                        this.$el.scrollTop = this.$el.scrollHeight;
                        }
                }
            },

After a research i found out that Safari has problems with scrollTop attribute as it is always Zero and cant be used for autoscroll to bottom. Does anybody know a solution for this problem? Thanks

The css attributes for the component where the messages are coming is:

.chat-area {
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
    }

What i tried was changing overflow-x:hidden to overflow-x:auto and overflow-x:scroll but nothing of it helped.

Answer 1

The solution for my problem was following:

var userAgent = window.navigator.userAgent;
            if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
                document.getElementsByClassName("chat-area")[0].style.position="absolute";
                document.getElementsByClassName("chat-area")[0].style.height= "80%";
                document.getElementsByClassName("input-row")[0].style.position="relative";
                document.getElementsByClassName("input-row")[0].style.width="100%";
                document.getElementsByClassName("widget-footer")[0].style.visibility="visible";
                if(window.innerHeight<= 568)
                {
                    document.getElementsByClassName("chat-area")[0].style.height= "75%";
                }

iOS Safari seems to have problems with autoscroll and smooth scroll if the position is static and not absolute.