The trickiest bug I’ve ever fixed

3 min read3 days ago

In this publication, you will discover the bug with vue3-virtual-scroll-list. While scrolling, messages may disappear or cause the scroll to break on vue3-virtual-scroll-list.

Plan
1. Introduction
2. Bug Description
3. Solution
4. Conclusion
5. Helpful Links

1. Introduction

So, it is not a typical bug with business logic or UI that we are all used to working with. Also, if someone wants to test it, this problem is quite difficult to reproduce. At the very least, you need to choose the right browser version, Safari 17.6, and scroll the chat randomly.

I reproduced this bug on Open Source code. I will leave links to the bug example and the solution below so you can test it.

The idea of the publication can be found in the conclusion.

2. Bug Description

In Safari Browser Version 17.6, while quickly scrolling up in the chat, messages may disappear, and the scroll can break. This doesn’t happen every time, but you can still catch this problem. Github code with bug on chat.
For my experiments, I took an Open Source repository and modified it a little for my needs. Below, I show a video of the caught bug.

Video with the bug reproduced

3. Solution

I started searching for a solution to the problem with:

Playing with reactivity. I added and updated keys, checked that the data I sent to the chat was reactive, and tried to update the reactive variable after updating the DOM. I tried many other things that had some effect on the display of messages, but this didn’t give any results.
I tried to understand the scroll logic. An interesting point is that if I added a small scroll after loading the data, it fixed the problem. However, this is not an optimal solution and would lead to new bugs.
I checked how optimally the library vue3-virtual-scroll-list is connected. I started comparing our code solution with the example from the library's documentation for creating a chat. In the end, I completely moved the example from the documentation into our project, but the bug remained.
Next, I started removing all unnecessary logic from the page to make sure that the code I moved from the documentation matched my code. At one point, the bug disappeared. It made me think that the module might have been connected incorrectly after all. But after a few experiments, I found that the v-overlay component from the Vuetify library in Safari Browser Version 17.6 causes constant and rare errors when working together with vue3-virtual-scroll-list.

At this stage, I found many solutions. I decided to modify the existing v-overlay component and replaced pointer-events: auto;, which was causing the problem, with pointer-events: none;. Here is the commit for the solution on Github.

Conclusion

The problem was described that can occur at the intersection of technologies and browser versions. The problem can be noticed only when using "vue3-virtual-scroll-list": "0.2.1", "vuetify": "3.7.2", and Safari Browser 17.6. Each one works correctly alone, but together, under certain conditions, errors occur.

The v-overlay component was part of the loader (spinner). In v-overlay, there is a rule for pointer-events that can determine how to pass events below. In our case, when I set pointer-events: none; the v-overlay which covered the page with a gray background, started to pass the scroll event down to the vue3-virtual-scroll-list component.

I also want to add that "vue3-virtual-scroll-list": "0.2.1" is not a fully stable library, and sometimes messages may disappear for a moment. Additionally, the question of how the browser version affected these libraries is not completely clear.

Helpful Links

Contacts:
1) Linkedin
2) Github
3) Landing page
4) Company: open to work : )