Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toast dimension might change slightly before transitioning out

See original GitHub issue

Versions

1.7.1

Describe the bug

On closing the toast, the content within the toast might jump around during the hide transition, causing unwanted jumpiness.

Before closing: Screenshot 2020-05-26 at 13 18 12

During closing: Screenshot 2020-05-26 at 13 18 22

Expected behavior

No change in dimensions during hiding.

Steps to reproduce

The bug is very dependant on the content of the popup, font sizes, browser, and some other factors as it’s due to precision loss when using offsetWidth so it’s not easy to create a case that reproduces reliably.

EDIT: This should reproduce: https://codesandbox.io/s/amazing-cherry-wx8n6?file=/src/App.vue

Your Environment

OS: macOS
Browser Chrome 83

Additional context

The issue is due to using element.style.width = element.offsetWidth + 'px' to “freeze” the width before starting the hide transition. That can cause the size of the toast to change slightly, causing the content to move around.

This is because at least Chrome doesn’t support sub-pixel precision for offsetWidth property so we get values rounded to the full integer that loose some precision. (relevant bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=360889).

A possible way to fix it is to use element.getBoundingClientRect().width (supports sub-pixels) instead but that’s not exactly equivalent to element.offsetWidth as former is affected by transforms while latter not. I’m not sure if there is any other API that could be more relevant here.