SSRS 2008 R2 - SSRS 2012 - ReportViewer: Reports in Safari/Chrome but works fine in Firefox/Internet Explorer 8... why?

Question

I have some simple reports in SSRS 2008 R2, but they won't display at all in Safari or Chrome. According to Microsoft's Books Online, these browsers are supported in limited fashion. However, I can't see anything after the data "Loading" clock completes. The parameter bar and bread crumb navigation section at the top of the page are all there. Also, I can Save/Export to any format on Safari and Chrome. It just won't display the report section itself, which is just blank.

Am I supposed to use certificates and secured connections (currently not setup with HTTPS, only HTTP)? Are there any server-side configurations that need to be tweaked? Has anyone had success displaying ANY reports on Safari/Chrome using previous SSRS versions (2005)?

I'm using Safari 5.0.4 and Chrome 10.0.648.151. I know the similarity for these two browsers is they both are based on WebKit.

The report renders successfully on Internet Explorer 8 (of course) and Firefox 4.0.

I would really appreciate it if someone can shed some light on this.

Answer 1

Ultimate solution (works in SSRS 2012 too!)

Append the following script to "C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\ReportManager\js\ReportingServices.js" (on the SSRS Server):

function pageLoad() {
    var element = document.getElementById("ctl31_ctl10");
    if (element)
    {
        element.style.overflow = "visible";
    }
}

Actually I don't know if the div's name is always ctl31_ctl10: in my case it is (instead over SQL Server 2012 azzlak found ctl32_ctl09).

If this solution doesn't work, look at the HTML from your browser to see if the script has worked properly changing the overflow:auto property to overflow:visible.

---

Solution for ReportViewer control

Insert this style line into the .aspx page (or into a linked .css file, if available):

#reportViewer_ctl09 {
  overflow:visible !important;
}

---

Reason

Chrome and Safari render overflow:auto in different way respect to Internet Explorer.

SSRS HTML is QuirksMode HTML and depends on IE 5.5 bugs. Non-IE browsers don't have the IE quirksmode and therefore render the HTML correctly

The HTML page produced by SSRS 2008 R2 reports contain a div which has overflow:auto style, and it turns report into an invisible report.

<div id="ctl31_ctl10" style="height:100%;width:100%;overflow:auto;position:relative;">
...</div>

Changing manually (using Chrome's debug window) final HTML overflow:auto in overflow:visible i can see reports on Chrome.

I love Tim's solution; it's easy and working.

But there is still a problem: Any time the user change parameters (my reports use parameters!) AJAX refreshes the div, the overflow:auto tag is rewritten, and no script changes it. This technote detail explains what is the problem.

This happens because in a page built with AJAX panels, only the AJAX panels change their state, without refreshing the whole page. Consequently, the OnLoad events you applied on the tag are only fired once: the first time your page loads. After that, changing any of the AJAX panels will not trigger these events anymore.

Mr.einarq suggested me the solution here.

Another option is to rename your function to pageLoad.

Any functions with this name will be called automatically by ASP.NET Ajax if it exists on the page, also after each partial update. If you do this you can also remove the onload attribute from the body tag

So I wrote the improved script that is shown in the solution.

Answer 2

CSS-based Solution

I was able to add the following to the stylesheet for Reporting Services, and it fixed it for me in Chrome.

Disclaimer: This isn't thoroughly tested for cross-browser compatibility.

/**************CHROME BUG FIX*****************/
div#ctl31_ctl09,
div#ctl31_ctl10
{
    overflow: visible !important;
}
/*********************************************/

Add that to the beginning of the ReportingServices.css file.

For me, that file is located at:

C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\ReportManager\Styles\ReportingServices.css

Answer 3

This is a known issue. The problem is that a div tag has the style "overflow: auto" which apparently is not implemented well with WebKit which is used by Safari and Chrome (see Emanuele Greco's answer). I did not know how to take advantage of Emanuele's suggestion to use the RS:ReportViewerHost element, but I solved it using JavaScript.

Problem

Solution

Since "overflow: auto" is specified in the style attribute of the div element with id "ctl31_ctl10", we can't override it in a stylesheet file so I resorted to JavaScript. I appended the following code to "C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\ReportManager\js\ReportingServices.js"

function FixSafari()
{    
    var element = document.getElementById("ctl31_ctl10");
    if (element) 
    {
        element.style.overflow = "visible";  //default overflow value
    }
}

// Code from https://stackoverflow.com/questions/9434/how-do-i-add-an-additional-window-onload-event-in-javascript
if (window.addEventListener) // W3C standard
{
    window.addEventListener('load', FixSafari, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
    window.attachEvent('onload', FixSafari);
}

Note

There appears to be a solution for SSRS 2005 that I have not tried but I don't think it is applicable to SSRS 2008 because I can't find the "DocMapAndReportFrame" class.

Answer 4

CSS-based system-wide solution

This doesn't require any JavaScript or Ajax frames or any other wrapper. It was tested on Internet Explorer, Firefox, Safari and Chrome.

This can be fixed at the Style Sheet level in Report Server.

First, navigate to the directory where reporting services is installed, in my case (SQL Server 2012 SP1) it is:

C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportServer

In that directory, you will find a file named reportserver.config.

See Customize Style Sheets for HTML Viewer and Report Manager.

In that file insert a single XML line like (from the above document):

<Configuration>
...
          <HTMLViewerStyleSheet>SafariChromeFix</HTMLViewerStyleSheet>
...
</Configuration>

Save that.

What they don't tell you in the above link is that this entry overrides the default style sheet completely. My first attempts to get the reports to render worked by adding a div stylesheet, everything else was broken. Once I figured out that this edit to the reporserver.config file didn’t augment, but actually replaces the default style sheet, I copied in the default style sheet and everything started working.

Next, descend into the Styles directory (C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportServer\Styles).

Make a copy the file named SP_Full.css and name the copy SafariChromeFix.css. At this point, SafariChromeFix.css should be identical to SP_Full.css.

Edit SafariChromeFix.css and add the following lines to the top:

div {
    overflow: visible !important;
}

Save it.

Once this is saved, all of the existing reports on this instance of Reporting Services will render on all browsers including Chrome and Safari.

Please Note:

It’s not only possible, but extremely likely that reportserver.config will be overwritten with updates to reporting services, so you may have to add the <HTMLViewerStyleSheet>SafariChrome</HTMLViewerStyleSheet> tag into it over time.

This also gives us a place to break into the default style sheet and make a lot of other custom changes starting from something that is already working. And since it's not the default stylesheet, your new custom CSS file doesn't get overwritten during upgrades and patches.

Answer 5

My solution was to add the following <script> to:

Reporting Services\ReportManager\Pages\Report.aspx

The script targets the visible report content's parent¹ and sets style.overflow:visible every time the report loads² -including paging through a multipage report.

if (window.addEventListener && document.querySelector) window.addEventListener("load", function () {

    // drop out if Sys.Application.add_load is undefined
    if (!window.Sys || !Sys.Application || !Sys.Application.add_load) return;

    // register a function for when report data is loaded
    Sys.Application.add_load(function () {

        // get the report content control
        var n = document.querySelector("[id^=VisibleReportContent]");

        if (n) {

            // get the report content control's parent
            n = n.parentNode;

            if (n) {

                // revert overflow:hidden to "visible"
                n.style.overflow = "visible";

            }
        }

    });
});

_{¹ This means we don't have to target generated ids which have a tendency to change, i.e.: ctl31_ctl09, ctl31_ctl10, ctl32_ctl09, etc.
² See Sys.Application.add_load()}

Answer 6

In my case the offending DIV is "ctl31_ctl09" so if the above solution doesn't work for you try changing var element = document.getElementById("ctl31_ctl10"); to var element = document.getElementById("ctl31_ctl09");

Answer 7

For me the name was "ctl32_ctl09" (SSRS from SQL Server 2012 SP1, MSRS11).

Answer 8

I had to go into Chrome with F12 and noticed I had ctl32_ctl09, not ctl31_ctl09 in my div.

This is for Windows Server 2008 R2 64Bit with SQL Server 2012. Append the script and then restart SSRS and clear the browser cache.

//Fix to allow Chrome to display SSRS Reports

    function pageLoad() {
    var element = document.getElementById("**ctl32**_ctl09");
    if (element)
    {
        element.style.overflow = "visible";
    }
}

Answer 9

The SQL Server 2014 release of Reporting Services adds support for the Google Chrome browser but there is no support for iOS yet. See details here.

Answer 10

Unfortunately, the main answer breaks floating (position absolute) columns in Internet Explorer reports. Therefore, I slightly modified it, which I don't love since it's specifically looking for WebKit, but it's working:

//SSRS 2012 Chrome fix
function pageLoad() {
    var element = document.getElementById("ctl32_ctl09");
    var isWebKit = !!window.webkitURL;    // Chrome or safari really (WebKit browsers).
    // We don't want to do this fix in Internet Explorer, because it breaks floating columns
    if (element && isWebKit)
    {
        element.style.overflow = "visible";
    }
}

Answer 11

The problem still exists in Chrome 22.0.1229.79.

YMMV, but I have found that removing height from the ReportViewer tag fixes this issue.

I was having this issue with SSAS reports, but not the SSRS ones. I couldn't figure out why until I checked the differences in the pages (a consultant had done the SSAS reports). He was setting ReportViewer Height=60% and the SSRS reports were not specifying the height.

Once I removed Height, my reports displayed.

Answer 12

For SSRS 2012 on Windows Server 2008 R2 x64, a working script is:

function pageLoad()
{
    var element = document.getElementById("ctl31_ctl09");
    if (element)
    {
        element.style.overflow = "visible";
    }

    if (window.addEventListener) // W3C standard
    {
         window.addEventListener('load', FixSafari, false); // NB **not** 'onload'
    }
    else
        if (window.attachEvent) // Microsoft
        {
            window.attachEvent('onload', FixSafari);
        }
}

function FixSafari()
{
    var element = document.getElementById("ctl31_ctl09");
    if (element)
    {
        element.style.overflow = "visible";  // Default overflow value
    }
}

All the suggested above versions were not working at all.

Answer 13

To get around having to hardcode the element ID, I edited the ReportingServices.js file on the RS server @ [Drive]:\Program Files\Microsoft SQL Server\[Reporting Services Instance]\Reporting Services\ReportManager\js\ReportingServices.js to include some code to fetch jQuery, load it into the page, and then find all elements where overflow is set to auto.

Insert the following code at the top of the ReportingServices.js file

var loadjQuery = function (cb) {
    if (typeof (jQuery) == 'undefined') {
        var scr = document.createElement('script');
        scr.setAttribute('type', 'text/javascript');
        scr.setAttribute('src', 'http://code.jquery.com/jquery-latest.js');

        if (scr.readyState) {
            scr.onreadystatechange = function () {
                if (scr.readyState === 'complete' || scr.readyState === 'loaded') {
                    scr.onreadystatechange = null;
                    if (typeof (cb) === 'function') {
                        args = [].slice.call(arguments, 1);
                        cb.apply(this, args);
                    }
                }
            };
        }
        else {
            scr.onload = function () {
                if (typeof (cb) === 'function') {
                    args = [].slice.call(arguments, 1);
                    cb.apply(this, args);
                }
            };
        }

        var head = document.getElementsByTagName('head')[0];
        head.insertBefore(scr, head.firstChild);
    }
}

Then the next line after that is what was originally in the JS file.

After that, add the following code

var _rmFixReady = false;
function pageLoad() {
    loadjQuery(function () {
        _rmFixReady = true;
    });
    if (_rmFixReady) {
        var overflowElements = $('div').filter(function () { return $(this).css('overflow') == 'auto'; });
        overflowElements.each(function () {
            $(this).css('overflow', 'visible');
        });
    }
}

I just finished testing this with Chrome 27 and IE 10 on a RM2012 instance and it worked great.

Answer 14

One problem with the overflow:visible fix is that floating headers are broken across all browsers. The following script will leave Internet Explorer alone and apply the fix only to non-Internet Explorer browsers. With this, all functionality is retained for Internet Explorer users and other browsers can still view the reports.

function pageLoad() {
    var eval = getInternetExplorerVersion();
    if (eval == -1)
    {
        var element = document.getElementById("ctl31_ctl09");
        if (element)
        {
            element.style.overflow = "visible";
        }
    }
}

function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
    }
    return rv;
}

Answer 15

I tried the approaches and it worked for me, but our system administrators were skeptical about these change.

Instead of setting height to 100% on the ReportViewer, I used a fixed height, and it managed to work in my application for Internet Explorer and Chrome.

Answer 16

I had the same problem with viewing repports on Chrome. I fixed it by adding the extension "SSRS Report Fix" to Google Chrome. https://chrome.google.com/webstore/detail/ssrs-report-fix/fjbdfjiheheafbioiejbdpalmojkeobk

Answer 17

I've never had any luck with displaying reports in Chrome. Most of Microsoft's documentation doesn't even list it so I assume Chrome must have trouble interpreting something in the ASP.

See Browser Support for Reporting Services and Power View.

I'm running Chrome 11 and experience the same behavior as you.