4 Replies Latest reply on Oct 25, 2016 1:15 AM by Christopher Chiche

    Side bar doesn't get hidden

    Christopher Chiche



      I am using the material-ui library in order to develop my web data connector and I have an issue with the browser that's bundled in tableau. The Drawer (left side bar) doesn't get hidden. Unfortunately I don't have access to any debug tools in the app to investigate more in order to suggest a fix to tableau or the material-ui.


      Here is a link that you can open in tableau as a web data connector that reproduces the issue: Material-UI


      Would anyone know a fix or at least what the bug is really about?


      Fun fact: the drawer hides the "export to tableau" button


      A way I could use would be if there was a variable set in the javascript that informs me that my application was opened from tableau.

        • 1. Re: Side bar doesn't get hidden
          Christopher Chiche

          After further investigation, it appears that the side bar is hidden by using the `transform` css preperty, which doesn't seem to be taken into account by the tableau browser.

          • 2. Re: Side bar doesn't get hidden
            Christopher Chiche

            So, the issue seems to be that Tableau Public on Mac uses AppleWebKit/538.1 which is quite outdated. The user agent I get is "Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/538.1 (KHTML, like Gecko) Tableau Public Safari/538.1". According to here it corresponds to Safari 8, from 2014.


            Since I am on MacOS Sierra and I don't have any CSS issue in Safari, I guess that the version of webkit used by tableau public is not the same.  Is it planned to upgrade it at some point?


            Here is a list of all of the issues I have had for now:

            - html5 navigation: I get a warning that the page has not been opened by the browser if I get to the address through navigation. I have solved this by using hash history (the history is after a hash).

            - flexbox doesn't work well.

            - css transforms don't work (the issue I originally opened here)

            • 3. Re: Side bar doesn't get hidden
              Brendan Lee

              Hey Christopher,


              Apologies for the pain here! You are right, the issues you are experiencing are due to the older browser version that we use within Tableau Desktop.  We use QT WebKit from QT 5.4, which is about the equivalent of Safari from 2014, so it is missing some modern browser features. I can't speak specifically to the features you've mentioned here, but  I've been able to use polyfills successfully on certain occasions.


              Unfortunately, I can't offer any practical advice here so hopefully someone from the community can chime in, but I did want to write and say we are actively working on this problem.  Upgrading to a new web browser is at the top of our roadmap for WDC.   It's not a small amount of work, but we will be upgrading to QT WebEngine (a chromium based browser) in a future release.



              WDC PM

              • 4. Re: Side bar doesn't get hidden
                Christopher Chiche

                Hi Brendan,


                Thanks for confirming my conclusions. I understand the struggle, I'm really eager to leverage the latest browser features in my tableau connector; so it's great to know that you're working on it!


                If anyone from the community has insights in polyfilling css transforms and css flexbox, it would be awesome.


                Best regards,