SSRS Report Viewer Control Browser Compatibility

Question

How compatible is the MS Report Viewer Control with browsers like Firefox and Safari?

Please also post if you know any 3rd party report viewers for SSRS.

Answer 1

Edit - 2016/2017 Update

SSRS 2016+ can be said to be cross-browser compatible.
Table borders aren't displaying right in IE10, but IE10 is dying out anyway.
In the rest of the browsers, it's fine.

You still need to register add_pageLoaded to translate the parameter prompts.

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () { fixReportingServices('rpt-container'); });

Also, like in versions < 2016, you need to add PageCountMode="Actual" to RS:ReportViewerHost control.

<RS:ReportViewerHost ID="ReportViewerControl" PageCountMode="Actual" runat="server" />

if you want to have meaningful paging numbers.

Also, there's a problem when you set the language in the query string with datepickers (with SSRS < 2016 as well). You need to set context.Request.UserLanguages[i] to the language specified in the query-string in context.BeginRequest in a HTTP-Module, if you want datepicker to work with a non-browser language.

Also, you need to add the X-Frame-Options and Content-Security-Policy HTTP-headers in each HTTP-response, if you want to use SSRS in an iframe in the internet securely. See my github-repository for details.

</EndEdit>

Pre-2016:

I can tell you, I have 9 years experience with the damn thing (SSRS 2005, SSRS 2008 R1 & R2, 2012, and SSRS 2014).

Let me assure you that because SSRS HTML reports depend on IE5-Quirksmode, there is no chance in hell they will ever render correctly in any browser other than Internet Explorer (IE < 10 I might be inclined to add).

IF you have admin access to the reportserver, and I stress the IF, you can add jQuery routines and CSS on the ReportViewer page to correct the most basic problems (like that you don't see more than 1cm of the report), but otherwise, the HTML rendering will still look absolutely horrible (margins, table borders, picture paddings, column size, textfield-size, title and/or pagenumber-alignment, etc., in short - just about anything)

Of course, the ActiveX printer control can only ever work in InternetExplorer (on Windows), because only there ActiveX are supported.

Let me also assure you, there is absolutely no way in hell to get ReportManager working in any other browser than IE.

As for Internet Explorer support, it should be mentioned, that starting as of IE version 10, IE defaults to webkit-quirksmode (for compatibility reasons) instead of IE5 quirksmode, so the HTML rendered will look equally horrible as in Chrome/Firefox/Safari for IE 10+, unless you added meta xua-compatible IE5 in the ReportViewer.aspx page.

The latter might not apply for Intranet, as IE automatically falls back to IE 7 compatibility mode when it's on an intranet site (but only in any Windows version < 8).

In Windows 8, localhost links and computername links (can't add the http:// in stackoverflow posts) are not assigned to the local intranet zone (probably as quick hack so IE doesn't fall back to IE7 compatibility mode), and therefore, Windows authentication will FAIL.

It should also be mentioned that it's not possible to add meta xua-compatible IE5 for ReportManager, because there is no page you can edit (compiled non-updateable ASP.NET website-project... ).
And that short of using the dev-tools to switch reportmanager in quirksmode, it's not possible to use ReportManager in IE 10+.

Then, another thing to mention is, that starting as of IE9, IE inherits the doctype of iframe elements from the parent page, and there is no way in hell to change that either (without changing the parent page to the desired child-page doc-mode).

So if you were clever enough to use iframes for the reports, because there is no way in hell any sane person wants popups in the age of popup-blockers, the report page will inherit the parent page's doctype. If that isn't IE5-QuirksMode, it will render the reports equally horrible as on Safari/Chrome/Firefox/Opera for any IE > 8, irrespecive of any possible meta xua-compatible ie5 tag in ReportViewer.aspx.

As for alternatives, for free and with a similar feature-set, there is only Eclipse BIRT (fortunately, the HTML rendering isn't similar).

It should be mentioned that BIRT, although licensed under the Eclipse Public License, uses SUN Java and therefore you are using Oracle technology, which is subject to its respective licensing terms.
Also, you are using non-Microsoft technology, and the Excel-Sheets BIRT renders are actually XML files, which will produce (who would have guessed) a rather alarming warning when opening in Office 2010+.

Then, for a rather large fee, there is http://www.stimulsoft.com reports, and Telerik reports.
From the technical looks of it, I'd recommend stimulsoft reports, but: disclaimer, i haven't used either of these, because they aren't free.

As for alternative SSRS rendering engines (not viewers btw), there is only www.fyireporting.com/‎, which has a fork here http://www.codeproject.com/Articles/138271/An-Open-Source-RDL-Engine.

But fyiReporting is incomplete and work in progress (if not abandoned), so I would refrain from using it.


Bottom line, if your product is IE & windows only, with windows version < 8 (and no - not <= just in case you haven't been paying attention), in intranet, called from pop-ups and not iframes, then go with SSRS.
For anything else, use stimulsoft reports (the problem is, you have to redo all your reports, as there is no automated migration - not even a non-working one).

PS:
And by adding "a little javascript", i mean the below thing(2008 R1 Edition, won't work on 2008R2+, may work on 2005, and note that you need to embed jQuery and jQuery Migrate in an inline-script tag, if the client PC's don't have access to http(s)://ajax.aspnetcdn.com [note: putting the scripts into the Pages folder and adding a relative or absolute link won't work...]):

<%@ Register TagPrefix="RS" Namespace="Microsoft.ReportingServices.WebServer" Assembly="ReportingServicesWebServer" %>
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Microsoft.ReportingServices.WebServer.ReportViewerPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<%= System.Web.HttpContext.Current.Request.Browser.Browser == "IE" && System.Globalization.CultureInfo.InvariantCulture.CompareInfo.IndexOf(System.Convert.ToString(System.Web.HttpContext.Current.Request.QueryString), "stylesheet", System.Globalization.CompareOptions.IgnoreCase) == -1 ? (System.Web.HttpContext.Current.Request.Browser.Browser != "IE" ? "": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=5\">") : "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">" %>

    <head id="headID" runat="server">
    <title>Report Viewer</title>




    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.1.0.min.js"></script>



    <script type="text/javascript">

        var bInFrameOrIframe = false;
        var iLanguageIndex = 0;
        var language = "DE_LOL";
        var UpdateLock = false;



        if (window.self === window.top) {
            // alert("true");
            // not in a frame 
            // Use IE5 quirksmode 
            //document.writeln('<meta http-equiv="X-UA-Compatible" content="IE=5" />');
            bInFrameOrIframe = false
        }
        else {
            // in a frame, FMS
            bInFrameOrIframe = true;
        }


        function TranslateParameterPrompts() {

            //mTo = false;
            $("table[id^='ParametersGridReportViewerControl'] span").each(function(index) {
                var strText = $(this).text();
                if (strText != null && strText.indexOf('/') != -1) {
                    strText = strText.split('/');
                    if (iLanguageIndex < strText.length)
                        strText = strText[iLanguageIndex];
                    else {
                        if (strText.length > 0)
                            strText = strText[0];
                    }

                    $(this).text(strText);
                }

            });

            //setTimeout(function(){mTo = true}, 5000);
        }


        function setTableSize() {
            //$("[id$='ReportViewerControl']")
            $(
                $(
                    $("#ReportFrameReportViewerControl")[0].contentWindow.document
                )
                .find("[id$='report']")[0].contentWindow.document.body
            ).find('*')
            .each(function() {
                //console.log("Processing an element");
            //var cls = $(this).attr("class");

            try {

                    // Don't add a border to sort-arrow
                    if ($(this).is('img')) {
                        return;
                    }


                    var anywidth = $(this).css('width');
                    var anywidth = parseFloat(anywidth);
                    //console.log("anywidth: " + anywidth);


                    //var lol = $(this).css('borderLeftWidth');
                    var blw = $(this).css('border-left-width');
                    var brw = $(this).css('border-right-width');
                    var btw = $(this).css('border-top-width');
                    var bbw = $(this).css('border-bottom-width');

                    var borls = $(this).css('border-left-style') == "solid";
                    var borrs = $(this).css('border-right-style') == "solid";
                    var borts = $(this).css('border-top-style') == "solid";
                    var borbs = $(this).css('border-bottom-style') == "solid";



                    var blw = parseFloat(blw);
                    var brw = parseFloat(brw);
                    var btw = parseFloat(btw);
                    var bbw = parseFloat(bbw);

                    //parseInt($(this).css("borderRightWidth"))
                    //console.log(parseInt($(this).css("borderLeftWidth")));

                    UpdateLock = true;


                    // Set width to 1px where 0px
                    if (anywidth == 0)
                        $(this).css('width', '1px');


                    if (borls && blw == 0.0 || (blw > 0.0 && blw < 1.0)) {
                        //console.log("setting border width");
                        $(this).css('border-left-width', '1px');
                    }

                    if (borrs && brw == 0.0 || (brw > 0.0 && brw < 1.0)) {
                        $(this).css('border-right-width', '1px');
                    }

                    if (borts && btw == 0.0 || (btw > 0.0 && btw < 1.0)) {
                        $(this).css('border-top-width', '1px');
                    }

                    if (borbs && bbw == 0.0 || (bbw > 0.0 && bbw < 1.0)) {
                        $(this).css('border-bottom-width', '1px');
                    }

                    UpdateLock = false;
                }
                catch (ex) {
                    UpdateLock = false;
                    //console.log(ex);
                }

            });             // End $('*').each

            // console.log("loop");




            var $img = $("img[onload^='this.fitproportional=true']");
            if ($img == null) {
                // console.log("img is null");
                return;
            }
            var $div = $img.parent();
            if ($div == null) {
                // console.log("div is null");
                return;
            }

            UpdateLock = true;
            {
                $img.removeAttr("height");
                $img.css('max-width', '100%')
                $img.css('max-height', '100%')

                $div.css('text-align', 'right');

                var divMinWidth = parseFloat($div.css('min-width'));
                var divWidth = parseFloat($div.css('width'));

                var divMinHeight = parseFloat($div.css('min-height'));
                var divHeight = parseFloat($div.css('height'));

                // console.log("width: " + divWidth);
                // console.log("height: " + divHeight);
                // console.log("min-width: " + divMinWidth);
                // console.log("min-height: " + divMinHeight);

                if (divMinWidth != 0)
                    $div.css('width', $div.css('min-width'));

                if (divMinHeight != 0)
                    $div.css('height', $div.css('min-height'));

            }
            UpdateLock = false;

        }


        $(document).ready(function() {

            switch (language) {
                case "fr":
                    iLanguageIndex = 1;
                    break;
                case "it":
                    iLanguageIndex = 2;
                    break;
                case "en":
                    iLanguageIndex = 3;
                    break;
                default: // "DE" 
                    iLanguageIndex = 0;
            }

            TranslateParameterPrompts();
            // setInterval(function() { TranslateParameterPrompts() }, 100);


            if ($.browser.msie && !bInFrameOrIframe)
                return;

            // if ($.browser.webkit)
            //setTableSize();

            $("[id$='ReportFrameReportViewerControl']").load(function() {
                //setNewHeight();
                //alert("Loading");

                setTableSize();

                $(
                    $("[id$='ReportFrameReportViewerControl']")[0].contentWindow.document
                )
                .find("[id$='report']").load(function() {
                    //alert("load report");
                    setTableSize();
                }
                ); // End load #report

            }); // End Function load #ReportFrameReportViewerControl

        });    // End Function document.ready

    </script>

</head>
<body style="margin: 0px; overflow: auto">
    <form style="width:100%;height:100%" runat="server" ID="ReportViewerForm">
        <RS:ReportViewerHost ID="ReportViewerControl" runat="server" />
    </form>
</body>
</html>

Note: UpdateLock stems from 2012 backport and is not really used here, and language stems from backport too, setInterval on TranslateParameterPrompts is necessary in 2012 and function for 2012 has only the little addition of "label" in the jQuery selector...

    function TranslateParameterPrompts() {

        //mTo = false;
        $("table[id^='ParametersGridReportViewerControl'] label span").each(function(index) {
            var strText = $(this).text();
            if (strText != null && strText.indexOf('/') != -1) {
                strText = strText.split('/');
                if (iLanguageIndex < strText.length)
                    strText = strText[iLanguageIndex];
                else 
                { 
                    if(strText.length > 0)
                        strText = strText[0];
                }

                $(this).text(strText);
            }

        });

        //setTimeout(function(){mTo = true}, 5000);
    }

Infering the language from the browser language goes like this, btw:

<script type="text/javascript">
    language = <%= System.Web.HttpContext.Current.Request.UserLanguages != null ? "\"" + System.Convert.ToString(System.Web.HttpContext.Current.Request.UserLanguages[0]) + "\"" : "null" %>;

    if(language == null)
        language = window.navigator.userLanguage || window.navigator.language;

    if(language != null)
        language = language.substr(0,2).toLowerCase();

</script>

And in 2012 you need to Dispose of the session cookies, otherwise you get "HTTP 400: Header too long" after opening about 120 reports:

<script type="text/C#" runat="server">
protected string ClearSessionKeepAliveCookiesToPreventHttp400HeaderTooLong()
{
    if(Request == null || Request.Cookies == null)
        return "";

    if(Request.Cookies.Count < 60)
        return "";

    // System.Web.HttpContext.Current.Response.Write("<h1>"+Request.Cookies.Count.ToString()+"</h1>");
    for(int i = 0; i < System.Web.HttpContext.Current.Request.Cookies.Count; ++i)
    {
        if(StringComparer.OrdinalIgnoreCase.Equals(Request.Cookies[i].Name, System.Web.Security.FormsAuthentication.FormsCookieName))
            continue;

        if(!Request.Cookies[i].Name.EndsWith("_SKA", System.StringComparison.OrdinalIgnoreCase))
            continue;

        if(i > 60)
            break;

        //System.Web.HttpContext.Current.Response.Write("<h1>"+Request.Cookies[i].Name+"</h1>");

        System.Web.HttpCookie c = new System.Web.HttpCookie( Request.Cookies[i].Name );
        //c.Expires = System.DateTime.Now.AddDays( -1 );
        c.Expires = new System.DateTime(1970, 1 ,1);
        c.Path = Request.ApplicationPath + "/Pages";
        c.Secure = false;
        c.HttpOnly = true;

        // http://stackoverflow.com/questions/5517273/httpcookiecollection-add-vs-httpcookiecollection-set-does-the-request-cookies
        //Response.Cookies[Request.Cookies[i].Name] = c;
        //Response.Cookies.Add(c);
        Response.Cookies.Set(c);
    }

    return "";
}


</script>

And on 2012, you need to listen to content update, because it uses Microsoft Ajax controls

function cbOnContentUpdate() {
    //console.log("content update");
    alterTableBorderWidth();
    // TranslateParameterPrompts();
} // End Callback cbOnContentUpdate


var hLastTimeout = null;

function queueUpdate() {

    if (UpdateLock)
        return;


    if (hLastTimeout != null)
        clearTimeout(hLastTimeout);

    hLastTimeout = window.setTimeout(function() { cbOnContentUpdate(); }, 50);

    //window.setTimeout(function() { cbOnContentUpdate(); }, 3000);
} // End Function queueUpdate


$(document).ready(function() {

    switch (language) {
        case "fr":
            iLanguageIndex = 1;
            break;
        case "it":
            iLanguageIndex = 2;
            break;
        case "en":
            iLanguageIndex = 3;
            break;
        default: // "DE" 
            iLanguageIndex = 0;
    }

    setInterval(function() { TranslateParameterPrompts() }, 100);

    // opt-out for non-framed IE, because that crook supports IE5-Quirks (framed takes parent-doctype in IE >= 9)
    if ($.browser.msie && !areWeInFrame())
        return;


    // if ($.browser.webkit)

    // console.log('Setting event listener!');

    // http://stackoverflow.com/questions/4979738/fire-jquery-event-on-div-change
    //$("[id$='ReportViewerControl']").bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    //$("[id$='ReportArea']")
    $("body")
     .bind('DOMNodeInserted DOMNodeRemoved DOMSubtreeModified', function(event) {

         if (event.type == 'DOMNodeInserted') {
             //console.log('Content added! Current content:' + '\n\n' + this.innerHTML);
             //console.log('Content added!');
             queueUpdate();
         }
         else {
             //console.log('Content removed! Current content:' + '\n\n' + this.innerHTML);
             //console.log('Content removed!');
             queueUpdate();
         }
     }); // End Bind IRM

});   // End Function $(document).ready

And note that for 2012, setTableSize is alterTableBorderWidth, and the selector goes like this:

 function alterTableBorderWidth() 
        {
            //$('*')
            $("[id$='ReportViewerControl']").find('*')
            .each(function() {

Btw, if you want to remove the PRINT icon, because it's only a source of sorrow, that goes like this (for German, English, French and Italian [the languages spoken in Switzerland + English]).

This CSS is for 2008 R1, don't know and care if it's the same in 2012.

input[type="image"][title="Drucken"], input[type="image"][title="Print"], input[type="image"][title="Imprimer"], input[type="image"][title="Stampa"]
{
    display: none !important;
}

And if that still doesn't deter you, then go right ahead and use forms authentication in SSRS 2012 (hint 1: there is no ms-provied sample as for 2005-2008R2, you need to write it yourself) ;)

Hint2: if you followed hint1, forms authentication redirect doesn't work when you have a colon in the URL [bug?], you can steal the code from mono and write your own redirect.

Hint3: if you followed hint2 and got forms authentication working, then you probably want to change the upload tool you're going to write, because you won't like to do manually "for each report browse-directory - check allow override checkbox - upload report - set datasource) for 120 reports or so, then you will be inheriting a class from ReportingService2005 and override GetWebRequest and GetWebResponse

''' <summary>
''' Overriding the method defined in the base class.
''' </summary>
''' <param name="uri"></param>
''' <returns></returns>
Protected Overrides Function GetWebRequest(uri As Uri) As System.Net.WebRequest
    Dim request As System.Net.HttpWebRequest
    request = DirectCast(System.Net.HttpWebRequest.Create(uri), System.Net.HttpWebRequest)
    request.Credentials = MyBase.Credentials
    request.CookieContainer = New System.Net.CookieContainer()

    If m_authCookie IsNot Nothing Then
        request.CookieContainer.Add(m_authCookie)
    End If

    Return request
End Function ' GetWebRequest 



''' <summary>
''' Overriding the method defined in the base class.
''' </summary>
''' <param name="request"></param>
''' <returns></returns>
Protected Overrides Function GetWebResponse(request As System.Net.WebRequest) As System.Net.WebResponse
    Dim response As System.Net.WebResponse = MyBase.GetWebResponse(request)

    ' http://social.msdn.microsoft.com/Forums/sqlserver/en-US/f68c3f2f-c498-4566-8ba4-ffd5070b8f7f/problem-with-ssrs-forms-authentication
    Dim cookieName As String = response.Headers("RSAuthenticationHeader")
    If cookieName IsNot Nothing Then
        m_authCookieName = cookieName
        Dim webResponse As System.Net.HttpWebResponse = DirectCast(response, System.Net.HttpWebResponse)
        Dim authCookie As System.Net.Cookie = webResponse.Cookies(cookieName)

        ' Save it for future reference and use.
        m_authCookie = authCookie
    End If

    Return response
End Function ' GetWebResponse 

Hint 4: The above methods won't work if you haven't installed service pack 1 + 2 on SSRS 2008 R2...

Hint 5: The TranslateParameters method is there because you cannot (by design) translate the parameter prompts to multiple languages by SSRS, so you write:

Raum / Local / Locale / Room 

which uses schema:

Text_DE / Text_FR / Text_IT / Text_EN

And then do split by '/' on the text (which is a little error prone if your prompt text contains '/' somewhere), and then select the right text by index of the language, by choosing MIN(splitarray.length, index) btw, just in case somewhere you only have Text_DE / Text_FR or whatever, first checking if the text contains a '/' at all, of course.

Hint 6: Need I go on ? (i could still expand this post to tenfold size, but I think I should go back to work now :) )

If you want to see just how f*up it looks, this is how vanilla ssrs renders in chrome

This is what it looks like in IE11, with IE5 compatibility set via xua

And this is what it should be, and what you can get it to render with much tinkering with javascript and CSS

Addendum:
Oh, and it gets even better

If you want to run reportviewer in a language specified by your application (which is NOT identical to the browser language), you need to set the culture of reportviewer to the culture specified in your query string...

<script type="text/C#" runat="server">
    protected override void InitializeCulture()
    {
        string sprache = System.Web.HttpContext.Current.Request.QueryString["in_sprache"];

        // System.Web.HttpContext.Current.Response.Write(sprache);

        switch(System.Globalization.CultureInfo.InvariantCulture.TextInfo.ToLower(sprache))
        {
            case "fr":
                sprache = "fr-CH";
                break;
            case "it":
                sprache = "it-CH";
                break;
            case "en":
                sprache = "en-US";
                break;
            default:
                sprache = "de-CH";
                break;
        }

        // System.Web.HttpContext.Current.Response.Write(sprache);

        System.Threading.Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture(sprache);
        System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(sprache);
        base.InitializeCulture();
    }



</script>

If you want to set a static culture, you can do so in the page declaration

<%@ Page UICulture="de" Culture="de-CH" %>

And if you try to remove the the print icon and the atom-feed, doing it with styles, no matter how, it only works in Chrome...

    input[type="image"][title="Drucken"], input[type="image"][title="Print"],    input[type="image"][title="Imprimer"], input[type="image"][title="Stampa"]
    {
        display: none !important;
    }


    input[type="image"][title="In Datenfeed exportieren"], input[type="image"][title="Exporter vers un flux de données"], input[type="image"][title="Esporta in feed di dati"], input[type="image"][title="Export to Data Feed"]
    {
        display: none !important;
    }
    */
    input[type="image"][src$="Microsoft.Reporting.WebForms.Icons.Print.gif"] {
        display: none !important;
    }

    input[type="image"][src$="Microsoft.Reporting.WebForms.Icons.AtomDataFeed.gif"] {
        display: none !important;
    }

But you can actually remove at least the print icon in internet-explorer by adding ShowPrintButton="false" to the reportviewer control:

<RS:ReportViewerHost ID="ReportViewerControl" ShowPrintButton="false" runat="server" />

Another idea: in SSRS 2012 & 2014 (and possibly 2008R2), you can also add your SSRS-fixing javaScript method into add_pageLoaded of ScriptManager. Like this:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () { fixReportingServices('rpt-container'); });

Then you don't have to listen to page change events, which speeds things up, because loaded is only called once at the end of each update.

WARNING

Because in the Internet, IE doesn't default to compatibility view,

<meta http-equiv="X-UA-Compatible" content="IE=5">

won't help you with certain issues either (rotate270 text/vertical text).

Even in IE, it only works properly when you are in the intranet, because only then it uses "compatibility view". While the meta-tag sets the brower into IE5-Quirksmode, it doesn't enable "compatibility view", so it isn't the true quirksmode...

Answer 2

MS Report Viewer Control will work fine in IE only. You can see the Reports from other browsers but you cannot able to view Zoom Option