Chrome 版本 65 iframe 错误？或 Tableau 错误？

Question

请在 Chrome ver 65 看到这个。

html

<!-- div display: block. NOT corrupted -->
<div id="block">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>

<input type="button" onClick="javascript:document.getElementById('none_to_block').style.display = 'block';" value="block!" />

<!-- div display: none - click block! button - to block. !!! corrupted !!! -->
<div id="none_to_block">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>

<input type="button" onClick="javascript:document.getElementById('hidden_to_visible').style.visibility = 'visible';" value="visible!" />

<!-- div visibility: hidden - click visible! button - to visible. !!! NOT corrupted !!! -->
<div id="hidden_to_visible">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>

css

#none_to_block {
  display: none;
}
#hidden_to_visible {
  visibility: hidden;
}

jsfiddle

第一个div可以
第二个 div 是 NG
第三个div可以

比照。 Chrome 版本 64 一切正常。

Chrome 版本 65 iframe 错误？或 Tableau 错误？

Answer 1

问题分析得很好！除了 chrome v65，这也发生在 Internet Explorer 上。 @hyukawa 您的 jsfiddle 也能够在 IE v11 中重现该问题。

我正在处理同样的问题。我的网页上有几个带有嵌入式画面的 iframe（Tableau 服务器 v10.4）。我使用相同的 display:none/block 机制来 hide/show 我页面上的图表。

作为临时解决方法，我每次切换显示时都会调用 viz.setFrameSize(width,height)(none/block)，目前似乎可以正常工作。

Answer 2

visibility:hidden 的问题是，它占据可视化项的白色 space。 display:block 的问题是，它没有完全渲染可视化。

我玩了一下 hyukawa 提供的 jsfiddle。因此，在 visibility:hidden 选项中，添加了一些 css (position: absolute; top: 0; left: 0;) to viz parent。它奏效了。

这是link for jsFiddle

HTML

<div class="viz-container">
  <!-- div display: block. NOT corrupted -->
  <div id="first" class="tableau-viz">
    <iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
    </iframe>
  </div>

  <!-- div visibility: hidden - click visible! button - to visible. !!! NOT corrupted !!! -->
  <div id="second" style="visibility:hidden;" class="tableau-viz">
    <iframe src="https://public.tableau.com/views/180315_class-culture_dotplots/lit-authors?:embed=y&:showVizHome=no&:host_url=https%3A%2F%2Fpublic.tableau.com%2F&:embed_code_version=3&:tabs=no&:toolbar=yes&:animate_transition=yes&:display_static_image=no&:display_spinner=no&:display_overlay=yes&:display_count=yes&:loadOrderID=0" width="1200" height="500">
    </iframe>
  </div>
</div>

CSS

.viz-container {
  position:fixed;  
}

.tableau-viz{
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

var displayedViz = "first";

$(document).ready(function(){
    function toggleViz(){
    $(".tableau-viz").css("visibility", "hidden");
    if(displayedViz == "first") {
      $("#second").css("visibility", "visible");
      displayedViz = "second";
    } else {
      $("#first").css("visibility", "visible");
      displayedViz = "first";
    }
    console.log('displayed : ' + displayedViz);
  }

  $("#toggleBtn").on('click', function() {
    toggleViz()
  });
});

Chrome 版本 65 iframe 错误？或 Tableau 错误？

Chrome ver 65 iframe bug ? or Tableau bug?

iframe

google-chrome

tableau-api

html

css