3 Replies Latest reply on Oct 31, 2018 4:41 PM by Carisa Chang

    Intermittent display issues in embedded visual when using iframe HTML tabs

    Toni Stark

      Hey, I have been tasked with taking 7 or so published Tableau dashboards and placing them in a set of HTML tabs(using iframes).

       

      When my page loads, it loads all the dashboards all at once and then the user can tab in between them.

       

      I am having an intermittent issue where dashboards with graphics (like bar charts) don't display all elements.

       

      It appears that unless Tableau has focus when it is loading, it will not always load all elements. It works sometimes and not others.

       

      I have solved this issue by doing a forced refresh (triggering a DOM update by calling JS function updateQueryStringParameter).

       

      With this method every time you click on a new tab, it forces the dashboard to reload. This is very slow and annoying to users.

       

      This issue appears to happen on Windows more than Mac. It occurs on Chrome and Edge.

       

      I also removed all tabs and placed all the dashboards one after another. Works 100% of the time.

       

      Can someone help me troubleshoot this issue? I have been tearing my hair out for a month trying to find an angle to investigate.

       

      Here is a picture of working vs non-working.

       

      Working:

       

      Screen Shot 2018-10-02 at 4.12.42 PM.png

       

       

      Not-Working:

      Screen Shot 2018-10-02 at 4.12.13 PM.png

        • 1. Re: Intermittent display issues in embedded visual when using iframe HTML tabs
          Carisa Chang

          Hi Toni,

           

          You are spot on here, this has to do with the tabs being hidden when the page loads, which means the calls to Tableau to load the vizzes are not sent by the browser. I've seen this happen most commonly in accordion elements in Firefox, but I could see how it would also happen in this instance. I think your best solutions are the ones you already explored: forcing all tabs to load manually, or not using tabs.

           

          Have you considered using the tabs function in Tableau directly, instead of embedding separately on tabs? If you had the dashboards as tabs in a single Tableau workbook, you could publish that workbook and use the built in tabs. Tableau handles all of the loading in this instance.

          • 2. Re: Intermittent display issues in embedded visual when using iframe HTML tabs
            Toni Stark

            Hi Carisa,

             

            First of all thanks for responding. Much appreciated!

             

            The problem is that the solutions are not solutions.

             

            1. We are currently doing a force refresh whenever a user clicks on a new tab. Our dashboards normally take 10+ seconds to load so when users tab over, they are forced to sit through another loading screen. This has led to many complaints.

             

            2. We actually started with Tableau tabs but the business has stated they do not want those tabs and that we are required to break them out and adopt the style that you see above.

             

             

            Can you think of any other ways to try and resolve this? It seems like some calls are indeed sent since the page loads but not all elements come back.

             

            Do you know if there is a way to escalate to Tableau Engineering? I don't see other libraries having this issue so it really seems like a Tableau related problem.

            • 3. Re: Intermittent display issues in embedded visual when using iframe HTML tabs
              Carisa Chang

              You're right, neither is a particularly elegant solution. If you're required to go forward with this design, I recommend opening a case with Tableau Technical Support. They can review network traces and your Tableau Server logs to determine which calls are reaching Tableau Server and what is being returned, and they can escalate to the Development team for further investigation.