当URL包含片段时，iframe会导致父元素在Google Chrome上向上滚动 [英] iframe causes parent elements to scroll up on Google Chrome when URL contains fragment
问题描述
在谷歌Chrome浏览器（37.0.2062.122，OSX / Windows）上，带有包含片段的网址的iframe会导致父元素向上滚动。 （在Safari和Firefox中进行测试）。
下面是一个显示问题的小提琴：（点击加载iframe后可以看到发生的错误）。
使用下面的代码在jsfiddle之外发生：
< html>
< head>
< style>
body，html {
padding：0;
border：0;
保证金：0;
身高：100％;
overflow：hidden;
}
#header {
height：50px;
背景：蓝色;
}
#content {
position：absolute;
top：50px;
right：0;
bottom：0;
剩下：0;
}
#overflow {
position：absolute;
height：50px;
底部：-50px;
}
< / style>
< script>
函数loadIframe（）{
var ifr = document.createElement（'iframe'）;
ifr.src ='https://en.wikipedia.org/wiki/Stack_overflow#See_also';
var content = document.getElementById（'content'）;
while（content.firstChild）{
content.removeChild（content.firstChild）;
}
content.appendChild（ifr）;
}
window.onload = function（）{
document.getElementById（'btn'）。onclick = loadIframe;
};
< / script>
< / head>
< body>
< div id = header>
< button id = btn>载入iframe< / button>
< / div>
< div id = content>
< / div>
< div id = overflow>
溢出
< / div>
< / body>
< / html>
On Google Chrome (37.0.2062.122, OSX / Windows), an iframe with an URL containing a fragment causes the parent elements to scroll up.
It's only happening in Chrome (tested in Safari and Firefox).
Here's a Fiddle showing the issue: http://jsfiddle.net/wmz5cu1y/1/ (you have to click Run twice.)
As you can see, the whole <body> containing the iframe has scrolled up. The header is hidden because it's now above the window, and there is an unexpected blank space at the bottom of the page.
How to avoid this ?
Bounty offered for a non-js workaround or a simpler html document reproducing the issue.
Reproducing script
Found a minimal way to reproduce the bug: http://jsfiddle.net/4oytgwon/1/embedded/result/ (you can see the bug happening after clicking on "load iframe").
It also happens outside of jsfiddle using the following code:
<!doctype html>
<html>
<head>
<style>
body, html {
padding: 0;
border: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
height: 50px;
background: blue;
}
#content {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
}
#overflow {
position: absolute;
height: 50px;
bottom: -50px;
}
</style>
<script>
function loadIframe() {
var ifr = document.createElement('iframe');
ifr.src = 'https://en.wikipedia.org/wiki/Stack_overflow#See_also';
var content = document.getElementById('content');
while (content.firstChild) {
content.removeChild(content.firstChild);
}
content.appendChild(ifr);
}
window.onload = function () {
document.getElementById('btn').onclick = loadIframe;
};
</script>
</head>
<body>
<div id=header>
<button id=btn>load iframe</button>
</div>
<div id=content>
</div>
<div id=overflow>
overflow
</div>
</body>
</html>
这篇关于当URL包含片段时，iframe会导致父元素在Google Chrome上向上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
