浏览器标签更改与页面加载相比的奇怪行为

Question

在Chrome和Microsoft Edge上观察。其他未经测试的浏览器。

我有一个使用CSS属性opacity和visibility加载的元素，以便隐藏它。在鼠标悬停时，:hover将其更改回visible和1。

• 在页面加载时，此元素未按预期对齐。它只是不是。
• 但是当我切换标签时，这个错位会得到纠正。
• 页面刷新遵循与页面加载相同的行为。

注意事项。元素的大小已设置。但它继承了其父母的大小。如果元素加载了其原始大小 - 则不会发现这些问题。

我可以调用刷新页面的函数，就像加载完成后切换选项卡一样吗？

CSS：

.my-hover-class {
    visibility: hidden !important;
    opacity: 0 !important; 
    -webkit-transition: all 0.2s ease-out !important;
    -moz-transition: all 0.2s ease-out !important;
    -o-transition: all 0.2s ease-out !important;
    transition: all 0.2s ease-out !important;
}

.rev_slider:hover .my-hover-class {
    visibility: visible !important;
    opacity: 1 !important;
}