Zebra_Pin icon indicating copy to clipboard operation
Zebra_Pin copied to clipboard

No resize/update is captured when a scrollbar appears after initialization

Open adamcoulombe opened this issue 3 years ago • 0 comments

Hello, I noticed an issue if you initialize zebra pin, and then the viewport width changes as a result of a scrollbar appearing. This can happen if something else on the page loads content via ajax or dynamic content.

A window.onresize event does not occur in this case; and this results in a slightly incorrect width on a zebra pin element.

You can observe the behavior/issue in this pen example (notice how the width is visibly different when it is pinned): https://codepen.io/adamcoulombe/pen/BapVRaL

It isn't practical in every scenario to manually update the zebra pin after ajax load. There could also be other factors that might cause this to occur beside just ajax.

I found a solution that I have implemented on my fork, and I wanted to share it. It could potentially be worked into this library, it is a little hacky though.

It involves adding a 100% width invisible iframe to the document and listening its resize event, then dispatching a resize event to the window if it occurs, the concept is described here: https://stackoverflow.com/questions/2175992/detect-when-window-vertical-scrollbar-appears

adamcoulombe avatar Apr 15 '21 16:04 adamcoulombe