javascript - Chrome - 专注于 iframe 输入会导致不必要的滚动

Question

我花了几天时间试图找到解决方案，但没有成功。我知道这可能是 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 上按 Tab 时，我也遇到同样的问题，因此我禁用了该选项卡。

Firefox dev.edition 似乎只是将选择选项移动到屏幕边缘，但 iframe 保持不变。请参阅第三个屏幕截图。

iframe 包含一个带有内联 JS 和 CSS 的 HTML 页面。

我已经尝试过:

• 取消绑定(bind)/绑定(bind)控件
• Iframe.click
• 聚焦 iframe，使用控件前后输入
• 背面可见性:隐藏

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

有什么问题吗？我的代码有什么问题吗？浏览器？我可以通过编程做些什么来防止这种情况发生吗？

感谢您的阅读。

Answer 1

这是 Chrome 上与处理 iframe 内容相关的错误。

现在似乎已在 v50 中部分修复。

https://bugs.chromium.org/p/chromium/issues/detail?id=597254&q=iframe%20input%20focus&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified