【发布时间】：2016-07-09 13:53:00
【问题描述】：
我花了几天时间试图找到解决方案，但没有运气。我知道这可能是 Chrome 错误，但我需要帮助。
这是一个通过骨干网和下划线构建的网络应用。我正在使用 Owl carousel 加载 iframe。
结构：
<div id="main">
<div class="viewer-container">
<!-- iframe loaded here -->
</div>
<div class="controls">
<!-- Controls/Buttons -->
next
previous
menu
fullscreen
</div>
</div>
场景：当点击诸如选择选项之类的输入时，Chrome 会将 iframe 滚动到天知道的位置。奇怪的是（无法确认但猜测），值得一提的是，如果我使用 iframe 之外的控件，则可能会发生这种滚动行为。
我只在 Chrome 上按标签时遇到了同样的问题，因此我禁用了标签。
Firefox dev.edition 似乎只是将选择选项移动到屏幕边缘，但 iframe 保持不变。见第三张截图。
iframe 包含一个带有内联 JS 和 CSS 的 HTML 页面。
我试过了：
-
Unbind / bind控件 Iframe.click-
Focus在iframe上，使用控件前后输入 backface-visibility: hidden
Chrome 版本：版本 49.0.2623.87（64 位） Firefox 版本：FF 开发者版 47.0a2 (2016-03-21) 操作系统：全部
截图：
点击前：
点击后：
FF:
var iframeDoc = $('#'+iframe.id).contents().get(0);
$(iframeDoc).on('click', function() {
//on('click, change, focus...
$(iframeDoc).focus();
$(iframeDoc).click();
$(this).css({
'-webkit-backface-visibility' : 'hidden', /* Chrome, Safari, Opera */
'backface-visibility': 'hidden'
});
});
导航：
/**
* Add events for carousel navigation. (Back and forward buttons)
*/
carouselControls: function(){
var self = this;
if($('#viewer-container').hasClass('fullscreen')) {
$('.navigation-btn').hover(this.showControls, this.hideControls);
}
$('#navigation-btn-back').unbind('click').on('click', function(){
self.slider.trigger('prev.owl.carousel');
self.loadFour();
});
$('#navigation-btn-forward').unbind('click').on('click', function(){
self.slider.trigger('next.owl.carousel');
self.loadFour();
});
$('#fullscreen-button').on('click', function(){
self.slider.trigger('refresh.owl.carousel');
self.loadFour();
});
},
相关信息： input tab focus chromium issue
有什么问题？我的代码有什么问题吗？浏览器？我可以通过编程方式做些什么来防止这种情况发生吗？
感谢阅读。
【问题讨论】：
标签： javascript jquery google-chrome iframe backbone.js