Css 浏览器搜索转换元素

我有一个transform:translate元素嵌入了一个overflow:hidden元素：

<div style="overflow: hidden; height: 200px; width: 200px;">
 <div class="hidden-element" style="transform: translate(300px, 300px)">Hidden</div>
</div>

隐藏的

我在内部元素中有一个隐藏元素：hover{transform:translate（0px，0px）；}规则

当我在浏览器中搜索“隐藏”（Ctrl+F）时，元素将移动到其原始位置

为什么会这样？如何预防？为什么浏览器搜索首先会改变我的布局

注意我没有：焦点css规则。停下来。 这是在Chrome、Opera和IE中发生的，而不是在Firefox中

---

谢谢。

这不是元素变为可见的情况，而是包含div滚动以显示新选择的内容的情况（该内容之前不可见，因为它在包含div的边界之外）。你可以在这把小提琴中更清楚地看到这种行为：（下面的CSS）

---

我不知道有什么方法可以防止HTML的焦点滚动行为，除了在JavaScript中检测滚动事件并将其强制返回。但是您可以使用

可见性：hidden

来隐藏您的元素，而不是依赖隐藏的溢出内容。

有用的答案。可视性：隐藏解决问题。我没有想到滚动的解释。谢谢

#outer{
    overflow: hidden;
    height: 200px;
    width: 200px;
    background:#FF0000;
}
#inner{
    transform: translateY(300px);
    -moz-transform: translateY(300px);
    -webkit-transform: translateY(300px);
}