This article only applies to SQL Server Reporting Services 2014 and prior. As of SSRS 2016, the compatibility with Chrome and Safari is quite good (as of fall 2017, anyway).
WebKit-based browsers (both Chrome and Safari) don’t like SSRS in its default configuration. Most of the problem comes from one issue: WebKit browsers render the “overflow:auto” CSS setting differently from IE and Firefox. This is a pretty good statement of the situation: http://stackoverflow.com/questions/5428017/cannot-view-ssrs-2008-r2-reports-in-safari-chrome-but-works-fine-in-firefox-ie8.
SQL Server Reporting Services 2012
The URL above has been updated to include an "Ultimate solution (Also working in SSRS 2012)." By following those steps, we resolved the WebKit browser display issue at WSU. The process is simple:
On the SSRS server, open “C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportManager\js\ReportingServices.js” for editing
Add this text to the end of the file: function pageLoad(){var element=document.getElementById("ctl32_ctl09");if(element){element.style.overflow="visible";}}
Remember that the element ctl32_ctl09 might be named differently in your configuration, so update the reference as necessary.
As mentioned under the 2008 R2 portion of this entry, remember that in Chrome you can use F12 to open developer mode, modify the overflow:auto setting of any element to overflow:visible, and verify if the fix is going to work.
SQL Server Reporting Services 2008 R2
Basically, edit the file C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\ReportManager\js\ReportingServices.js on the reporting services server
function testCSS(prop) {
return prop in document.documentElement.style;
}
function pageLoad() {
var isIE = /*@cc_on!@*/false || testCSS('msTransform');
var isFirefox = testCSS('MozBoxSizing');
var element = document.getElementById("ctl31_ctl09");
if (element && !isIE && !isFirefox)
{
element.style.overflow = "visible";
}
}
Then SSRS and IIS need to be restarted for the change to go live.
If that doesn't work, try ctl31_ctl10 insteal of ctl31_ctl09. Basically, in Chrome hit F12 to open developer mode. Search for the word "overflow", you will find it in a <div> tag named very similarly to ctl31_ctl10. When found, edit the tag in the development area and change the "overflow:auto" to "overflow:visible". That should fix the problem in the browser window immediately. If so, the name of that div tag needs to be used in the javascript above.