I had a problem with my Doorbell.io integration: it caused my site to flash or flicker, if you will. This post is written for those who try to find the answer from google and aren’t able to debug it themselves.
First of all: load https://doorbell.io a couple of times and pay attention to the size of the scrollbar on the right just a millisecond before the Doorbell feedback button appears on the lower-right corner. The scrollbar changes its size very quickly just before the button appears. This is not a problem, in my opinion, on any site that has higher than 100 % body and overflow is not hidden.
But if you have a site whose body is height: 100% or if you have a site that doesn’t have initially any content that would require the browser to display the scrollbar, the appearing of the button makes your screen… flash or flicker or whatnot. More specifically: 1st: no scrollbar, 2nd: Doorbell is about to be added, 3rd: scrollbar appears for a tiny moment and disappears very quickly, 4th: Doorbell button itself appears.
The appearing and disappearing of the scrollbar makes the screen flicker since it happens very quickly. It also amends every element’s position a bit to the left and then reverts it. This is caused by the Doorbell button being added to the DOM with a visibility: hidden attritute but still without display: none. Visibility causes the element, the button, to take space on the screen even if the element itself is invisible. So the button is added to the DOM and it takes it’s place on the lower-left corner for a tiny moment and has its visibility attribute in hidden state. This causes the height of the body go from the original size to original size + button height and then revert very quickly back to original size. This causes the flickerin’ scrollbar on the right since the invisible button that is momentarily the last thing in the body appears.
My fix (which is in no way the only one):
Add #doorbell-button { display: none; } to your own CSS and add this to Doorbell init JS:
window.doorbellOptions[‘onInitialized’] = function () {
setTimeout(function () { document.getElementById(‘doorbell-button’).style.display = ‘block’; }, 250) }
This makes sure that when the button is added to the DOM it’s not shown and it doesn’t take any space (thus display: none). When the Doorbell JS is about to initialize (configure the button and rest of the stuff your way) it executes this function. The function itself places another function to be executed in 250ms (at the earliest) and that changes the Doorbell button’s display property to block.
This solution prevents the rapid change in the body’s height and thus prevents an unwanted flickering scrollbar on a page that didn’t have one without Doorbell’s init process.