diff --git a/packages/rocketchat-ui/client/views/app/popover.html b/packages/rocketchat-ui/client/views/app/popover.html
index 9552e4ff21571..9ebb7a82c547d 100644
--- a/packages/rocketchat-ui/client/views/app/popover.html
+++ b/packages/rocketchat-ui/client/views/app/popover.html
@@ -1,5 +1,5 @@
 <template name="popover">
-	<div class="rc-popover rc-popover--{{popoverClass}}" data-popover="popover" style="display:block;">
+	<div class="rc-popover rc-popover--{{popoverClass}}" data-popover="popover" style="display: block; visibility: hidden;">
 		<div class="rc-popover__content {{#if isSafariIos}}rc-popover__content--safariIos{{/if}}">
 			{{#if template}}
 				{{> Template.dynamic template=template data=data}}
diff --git a/packages/rocketchat-ui/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
index 30e2897c626ce..18693d0db61ef 100644
--- a/packages/rocketchat-ui/client/views/app/popover.js
+++ b/packages/rocketchat-ui/client/views/app/popover.js
@@ -5,8 +5,13 @@ import { hide, leave } from 'meteor/rocketchat:lib';
 
 this.popover = {
 	renderedPopover: null,
-	open(config) {
-		this.renderedPopover = Blaze.renderWithData(Template.popover, config, document.body);
+	open({ currentTarget, ...config }) {
+		// Popover position must be computed as soon as possible, avoiding DOM changes over currentTarget
+		const data = {
+			targetRect: currentTarget && currentTarget.getBoundingClientRect && currentTarget.getBoundingClientRect(),
+			...config
+		};
+		this.renderedPopover = Blaze.renderWithData(Template.popover, data, document.body);
 	},
 	close() {
 		if (!this.renderedPopover) {
@@ -52,8 +57,8 @@ Template.popover.onRendered(function() {
 		const customCSSProperties = typeof this.data.customCSSProperties === 'function' ? this.data.customCSSProperties() : this.data.customCSSProperties;
 
 		const mousePosition = typeof this.data.mousePosition === 'function' ? this.data.mousePosition() : this.data.mousePosition || {
-			x: this.data.currentTarget.getBoundingClientRect()[horizontalDirection === 'left'? 'right' : 'left'],
-			y: this.data.currentTarget.getBoundingClientRect()[verticalDirection]
+			x: this.data.targetRect[horizontalDirection === 'left'? 'right' : 'left'],
+			y: this.data.targetRect[verticalDirection]
 		};
 		const offsetWidth = offsetHorizontal * (horizontalDirection === 'left' ? 1 : -1);
 		const offsetHeight = offsetVertical * (verticalDirection === 'bottom' ? 1 : -1);
@@ -62,7 +67,7 @@ Template.popover.onRendered(function() {
 			popoverContent.style.top = `${ position.top }px`;
 			popoverContent.style.left = `${ position.left }px`;
 		} else {
-			const clientHeight = this.data.currentTarget.clientHeight;
+			const clientHeight = this.data.targetRect.height;
 			const popoverWidth = popoverContent.offsetWidth;
 			const popoverHeight = popoverContent.offsetHeight;
 			const windowWidth = window.innerWidth;
@@ -122,6 +127,8 @@ Template.popover.onRendered(function() {
 	$(window).on('resize', position);
 	position();
 	this.position = position;
+
+	this.firstNode.style.visibility = 'visible';
 });
 
 Template.popover.onDestroyed(function() {