Question

我花了好几天试图找到解决方案，但没有运气。我知道这可能是Chrome漏洞，但我需要帮助。

这是一个通过主干和下划线构建的网络应用程序。我正在使用猫头鹰旋转木马加载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保持不变。见第3张截图。

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

我试过了：

Unbind / bind控件
Iframe.click
Focus，在使用控件之前和之后输入
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

有什么问题？我的代码有什么用？浏览器？有什么我可以通过编程方式来防止这种情况吗？

感谢阅读。

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

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

1 个答案: