Chrome和Firefox溢出：隐藏的跳跃元素 [英] Chrome and Firefox overflow:hidden jumping elements

问题描述

我偶然发现了Chrome和Firefox中出现的一个奇怪的行为，当你有一个position：relative;的元素时和溢出：隐藏和锚：绝对;。

每当锚获取焦点上面的元素奇迹般地跳到顶部，即使它的样式和标记告诉一个不同的故事。

例如： http：// codepen.io/mediadivisiongmbh/pen/pJWmxp

所有你需要的是类似的设置：

HTML

 < div class =container> 
< h1>我可以飞行< / h1> 
< a class =focus-mehref =＃>邪恶连结< / a> 
< / div> 
  

CSS

  .container {
 position：relative; 
 overflow：hidden; 
 
 / *可选* / 
 border：1px纯灰色; 
} 
 
 .focus-me {
 position：absolute; 
 
  

感谢您的回答。为了澄清这个问题，请看看这个例子：

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

当您将鼠标悬停在容器上时，包含锚点的绝对定位元素将在过渡中。当你点击它时，一个灯箱（在这种情况下，Magnific Popup）被打开。在你关闭这个灯箱之后，锚点再次获得焦点并跳转到视图，这看起来很奇怪。

将锚点设置为 display：none ，默认情况下为 display：block ，当鼠标悬停在容器上来解决这个问题时。 >解决方案

经过更多的研究，我发现问题是由Chrome中的辅助功能引起的。

在我的情况下，我只需要确保只有在标签悬停在容器元素上时才能访问锚标签。

因此，解决方案是像这样改变CSS：

  .container {
 position：relative; 
 overflow：hidden; 
 
 / *可选* / 
 border：1px纯灰色; 
} 
 
 .focus-me {
 position：absolute; 
 display：none; 
} 
 
 .container：hover .focus-me {
 display：inline-block; 
} 
  

I stumbled over a strange behaviour that occurs in Chrome and Firefox when you have got an element with "position:relative;" and "overflow:hidden;" and an anchor in it with "position:absolute;".

Whenever the anchor gets focus the element above it magically jumps to the top, even though its styles and markup tell a different story.

Example: http://codepen.io/mediadivisiongmbh/pen/pJWmxp

All you need is a setup similar to this:

HTML

<div class="container">
  <h1>I can fly</h1>
  <a class="focus-me" href="#">Evil Link</a>
</div>

CSS

.container {
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;
}

.focus-me {
    position:absolute;
}

Thanks for your answers so far. In order to clarify the issue please take a look at this example:

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

When you hover over the container, the absolute positioned element containing the anchor will transition in view. When you click on it a lightbox (in this case Magnific Popup) is opened. After you close this lightbox the anchor gets focus again and jumps into view, which looks pretty odd.

Setting the anchor to display:none by default and display:block when hovering over the container worked for solving this issue.

解决方案

After more research I figured out that the problem is caused by an accessibility feature in chrome.

In my case I just needed to make sure the anchor tag is only accessible while hovering over the container element.

Therefore the solution was altering the CSS like this:

.container {
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;
}

.focus-me {
    position:absolute;
    display:none;
}

.container:hover .focus-me {
    display:inline-block;
}

这篇关于Chrome和Firefox溢出：隐藏的跳跃元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！