纯 CSS 滑入式元素与元素交互奇怪<audio>

Question

我有一个页面，用户可以在该页面上单击链接，然后一个面板从右侧滑入以覆盖页面的一半。它只使用CSS、no JS，通常工作良好。

然而，页面的主要部分有一个<audio>元素，一旦我向其中添加URL，面板的打开行为就会变得奇怪——面板确实滑入，但主页面内容会跳出屏幕，从左侧滑入。这里有一个最小的例子。

JS Fiddle在这里可用

#panel {
position: absolute;
background: #ccc;
top: 0;
left: 100%;
width: 0px;
height: 100%;
transition: left 1s ease, width 0s ease-out 1s;
}
#panel:target {
left: 50%;
width: 50%;
transition: left 1s ease 0.1s, width 0s ease-out 0.1s;
}

<audio class="player" controls>
<!-- Remove the URL below and things work as expected: -->
<source src="http://stream-relay-geo.ntslive.net/stream" type="audio/mp3" />
</audio>
<a href="#panel">Open panel</a>
<div id="panel">
<a href="#top">Close panel</a>
</div>

我不知道(a(为什么URL的存在会导致这种情况发生，或者(b(如何阻止它

Answer 1

问题来自于在屏幕外转换的目标元素。单击锚点时，#panel元素处于焦点/选中状态，浏览器将尝试移动视口，使元素在视口中保持可见。由于元素在视口外渲染，但在视口后滑入，这会导致浏览器不断调整其水平滚动位置，使其保持在视图中。

一种可能的解决方法是简单地将#panel的内容封装在内部<div>元素中，并绝对定位该内部div元素。在这种情况下，#panel总是以一种方式保持在屏幕上：

#panel .inner {
position: absolute;
background: #ccc;
top: 0;
left: 100%;
width: 0px;
height: 100%;
transition: left 1s ease, width 0s ease-out 1s;
}
#panel:target .inner {
left: 50%;
width: 50%;
transition: left 1s ease 0.1s, width 0s ease-out 0.1s;
}

<audio class="player" controls>
<!-- Remove the URL below and things work as expected: -->
<source src="http://stream-relay-geo.ntslive.net/stream" type="audio/mp3" />
</audio>
<a href="#panel">Open panel</a>
<div id="panel">
<div class="inner">
<a href="#top">Close panel</a>
</div>
</div>

Answer 2

问题是由css规则中的转换延迟引起的。无论音频是否加载，如果你试图在侧栏关闭时打开它，就会产生问题。。

要解决这个问题，只需降低转换延迟值，它就会正常工作。。

#panel {
position: absolute;
background: #ccc;
top: 0;
left: 100%;
width: 0px;
height: 100%;
transition: left 1s ease 0.1s, width 1s ease 0.1s;
}
#panel:target {
background: #ccc;
left: 50%;
width: 50%;
transition: left 1s ease 0.1s, width 1s ease 0.1s;
}