Weird White Block Appears and Disappears When Click on TextArea

I was seeing this weird white block appearing and disappearing on my page when I click a textarea inside a bootstrap modal popup.

weird white box grammarly caused

Apparently, this is caused by Grammarly’s Chrome add-on.  Open the developer tools of chrome and observe the “Elements” tab.

launch chrome dev tools

Click the text area while “Developer Tools” is still open. You will see that there are new elements added to the page above the <body> as soon as you click the textarea element.

developer tools elements grammarly added divs

As you can see 3 new div elements have been added to the page. This is what has been causing that mysterious while block that appears and disappears on the page.

How do I know it is related to Grammarly? Expand the first div and put your mouse over the div inside. It will put the focus on the Grammarly icon inside the textatea element. These elements are inserted by Grammarly add-on at runtime for the add-on to work.

weird white box grammarly caused 2

If you disable Grammarly add-on this weird white block will stop showing.

Hope this helps.
Good Luck,