I have a reportviewer control to which I feed a SSRS report.
The report that gets generated is fairly large to fit in single view.
So when we see that report in reportviewer on Firefox 11+ or chrome 15+ the tables rendered are overlapped but it runs perfectly well in IE.
Is there any generic solution for these.
Refer Image:
I have some bad news for you, I'm afraid. Browser support outside IE in version 9.0.0.0 (the 2008 version) is... terrible. As Microsoft states on the corresponding MSDN page.
Internet Explorer is recommended if you want to use all of the available functionality. Although you can use other browsers to view a report, Internet Explorer is the only browser that is guaranteed to support the complete set of features used for working with reports.
With version 10.0.0.0 things improved. In our experience, they improved a lot. This MS blog post from 2009 also mentions this:
Significantly improved browser compatibility. We’ve put a huge amount of effort into improving our support across browsers. We’ve seen plenty of reports of extra scrollbars or other problematic renderings in Firefox, Safari, and standards mode in general. The initial feedback on these changes has been very positive.
The corresponding MSDN page on ReportViewer 10.0 is also quite a bit less "pushy" about users having to resort to IE. There's still a few things that are IE-specific (printing and zooming, for example).
We've experienced the same issues, such as overlapping tables... and then some. Trying to override the styles that were causing this turned out hard, if not impossible. However, just about all of those issues with layouting were gone after we upgraded to 10.0.0.0.
So, I started my answer with "I have some bad news", so here it is: AFAIK you can't reasonably solve these issues without upgrading to the newer Report Viewer.
Related
I have my application running when i Run on I.E8 it is working ok
but on other browsers like chrome,Firefox or I.E10 the functionality seems to be bit different.
For instance I have a log out button link that is missing in the other browsers and only visible in i.e8
my question is for these kind of things what are the exact things that are responsible for these functionality.
Where can I look and what can be the possible fixes?
Web browsers render things differently - this is a very common and frustrating part of web development. Older versions of Internet Explorer seem to be the worst.
To help you be less frustrated for now, I suggest you develop things to work primarily in the latest versions of the more popular browsers (Chrome, Firefox and IE9+), then fix your code to work with the less used browsers afterwards.
You also have discrepancies in default values for browsers. For instance, one browser might include margins in a default value whilst another will not. There are way too many cases for me to list all of the things which are responsible, the only way really is trial and error coupled with reading up online.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
My team is working on a new site which should be cross browser compatible (IE 8+, Chrome, Safari, Firefox, Opera) and cross platform compatible (Desktop, Tablet, Smartphone).
We've been looking at a lot of the new methodologies for achieving this such as HTML 5, responsive design, using JS libraries that abstract a lot of the browser mess away from the user but since the browsers and even MVVM, but the one major issue that I've been facing is how fast the browsers are changing. With both Chrome and Firefox using a model of continuous delivery it becomes harder and harder to test. And from the looks of it other sites have the same problem (it seems like it's hit or miss these days as to whether a site will work in a particular browser)
What suggestions do you or your team have for testing new browsers as they come out?
What things do you do during development to decrease possibility of having code break when a browser update comes out?
And how do you decide when you will or will drop support for a browser version?
NOTE: I've altered the order of your questions to leave the longer answer at the end.
Your questions
What suggestions do you or your team have for testing new browsers as they come out?
Actually, as you said, Chrome and Firefox are continuosly delivering so it eases the process. The last version you have is mostly always the version the user has.
For any other browser (and Chrome and Firefox old versions) just select a version of each and act as a "high pass filter", testing any version up from the one you selected.
How do you decide when you will or will drop support for a browser version?
Take a look at the statistics of browser use. There are many resources such as statcounter, w3counter, w3cschools, or wikimedia. If possible, add an analytics tracker to your page and you will have data about what devices, platforms, browsers, and versions of them the visitors use to access the site.
What things do you do during development to decrease possibility of having code break when a browser update comes out?
The key is to use a well defined methodology, based on the existing standards. Continue reading for a personal recommendation.
Workflow to ease cross-browsing
Step 1: Bootstrapping
At first decide: Graceful degredation versus progressive enhancement. Both are valid techniques, but makes sense using the first to fix existing projects and the second for newly created projects.
Then select libraries to avoid typing existing code, focusing on the 3 languages: JavaScript, CSS, and HTML. HTML5 (+CSS3) is the better choice today but support for older browsers must be provided. The following libraries ease supporting them:
modernizr for feature detection and conditional loading of js or css.
jQuery for ajax and dom related tasks.
normalize.css for normalize default browser styles, rather than just "resetting" them.
Notice that all of the js libraries listed above allow custom builds, an important thing when performance matters.
Html5 Boilerplate provides a strong template from which start the layout. It includes modernizr, jQuery, and normalize.css. Its github repository is a good resource to learn a lot about cross-browsing techniques. This article on its wiki has a nice set of links to start learning.
Step 2: Do the work
Designs should be mobile-first and responsive. This article on html5rocks introduces well why and how.
While "doing the work":
Follow the w3c standards. Avoids using hacks, specially CSS hacks, when possible. Review often the HTML5 specification as it is pretty unstable.
Take care of ECMAScript 5 features when writing javascript. Rely on libraries to avoid code breaks caused by deficient browser implementations. Do not extend the DOM.
Automate tests when possible. Layout and specially layout polishing, including animations, are manually tested cause it's quicker but UI functionalities like form submision can be perfectly tested with automated tests.
Use tools to ease tasks. Chrome + devtools or Firefox + firebug are the very basic must-use, but there are a bunch of tools to ease cross-browsing tests, even automating those tests.
Annex: Tools and resources
Cross-browser testing
Browserstack is just awesome. Allows testing on all devices, platforms, browsers, and versions.
Browserling is an alternative to browserstack. It is developed and maintained by Peteris Krumins and James Halliday, both recognized members of the node.js community and well-known developers. They also published a tool to automate the process called testling-ci, but this is only relevant if using node.js on the back-end.
modern.ie provides tools to ease testing on internet explorer. Developed by Microsoft, the site provides live testing through browserstack and downloadable virtual machine images with pre installed software.
adaptability testing for "responsive design"
respon.si is an online tool meant to test the visually appearance of layouts. It allows selecting a resolution so it's useful for responsive layouts testing. Notice that any other tool to select a resolution can easily do the same.
What suggestions do you or your team have for testing new browsers as they come out?
As part of our definition of done we support the following desktop browsers:
IE8+
Firefox 3.6
Firefox (latest)
Chrome (latest)
Safari 6
The support of the latest versions of Firefox/Chrome is fine because they both provide automatic updates, and so if anybody has a problem on an older version of the browser, it's out of our hands and they should update.
The majority of Firefox/Chrome testing can be done on our machines, but there are obviously discrepancies with how the different OS' handle fonts, and some quirks with native form elements that may or may not carry over to versions on Windows.
To test Firefox versions on OS X I use the "Install all Firefoxes" script that I created, to allow me to run multiple versions of Firefox side-by-side.
Our development team uses Ubuntu and Mac OS as their environments, so we have a dedicated machine with virtual machines for each version of IE, and Chrome/Firefox on Windows, and Safari 6 on OS X.
These virtual machines were setup using the images provided by modern.ie. We're remotely accessing the machine with the virtual machines on so that we don't need to break our workflow and go to another machine.
What things do you do during development to decrease possibility of having code break when a browser update comes out?
The obvious things are avoiding CSS hacks, and making sure that the HTML/CSS/JavaScript that is written meets our code standards, and our definition of done.
If we're using experimental CSS features, we ensure that we're providing vendor prefixed and lastly w3 definitions of properties:
-moz-foo: bar;
-ms-foo: bar;
-o-foo: bar;
-webkit-foo: bar;
foo: bar;
Obviously this introduces some technical debt, but if you're using a preprocessor for your CSS, the overhead of this can be reduced.
We keep a separate stylesheet for IE and load it using conditional comments, so that we can fix problems in IE without affecting the integrity of the rest of the front-end for other browsers. There's a movement lately to moving this in to a shame.css though, which you can read about here: http://csswizardry.com/2013/04/shame-css/
And how do you decide when you will or will drop support for a browser version?
Google Analytics. Segmenting by browser type in Google Analytics is very useful. When usage for a particular browser drops below 10% it's a good time to stop developing new features for it.
You could do something as radical as throwing away all of your hacks/styles for that browser too, but for a smoother transition (and to encourage people to upgrade) it's better to simply stop developing for the older browser, and maybe conditionally display a message.
We dropped support for IE7 recently, and now visitors using IE7 will get a message telling them to upgrade, and they don't get any more fixes or additional features.
Mobile is a whole other kettle of fish, and if your site is completely responsive it's an extra layer of pain.
We've got a bunch of different size/version Android devices, a couple of old iPhones and an iPad kicking around the office that we use for testing the majority of mobile browsers on.
Obviously there are differences with screen size, DPI, browser version etc. The best you can do in this regard is cater for the most common case, and fix any issues as they surface.
design and develop with web standards. validate the web platform. all of the libs/solutions/etc., already listed are phenomenal and quite useful, but if you stick to standards, you'll find you need those libs less and less...at least for gracefully degrading user agent support. i find i use them more and more for progressive enhancement.
I have focussed on server side development for a few years and now I am branching out into client-side application construction.
I must say that I am finding it difficult to make the client-side application look the same across multiple browsers....
Are there any decent online resources that can aid the faster learning of cross-browser compatibility principles...
For the HTML/CSS part, I find that if you follow the following two rules, things usually work out fairly well:
Write standards-compliant, semantic HTML. Focus on semantically correct document structure first, then use CSS to lay it out the way you want. Only change the HTML if you feel you absolutely have to. Avoid layout patterns that are hard to get right with HTML and CSS, and if you have to, A List Apart contains tons of articles about these things.
Test in all the browsers. If you're serious about web development, you need a bunch of test setups; at the very least, I recommend you have these ready: Internet Explorer 6, 7 and 9 (this means you have to use virtual machines, as there is no way to realistically simulate different IE versions on the same OS install); Firefox 3.6 and 7 (or whatever the current version is); the most recent Google Chrome; a somewhat older Chrome or Chromium (I use chromium from debian); Opera (because it does not share any important components with any other browser). If you can afford a Mac, add FF/Mac and Safari to the mix. If you develop for mobile devices, you need to test on those as well - at least Android and iOS.
If you have to support older Internet Explorer versions (7 or, gasp, 6), then conditional comments are your friend - my usual strategy is to make a design that works on all the other browsers first, and then add one or more special style sheets in conditional comments (so that only IE loads them) that 'fix' things for these broken browsers.
For the javascript part, the sane thing to do is go with a framework that polishes the various pecularities away - jQuery is probably the most popular one at the moment.
We're looking for a tool that would allow us to script and run tests across multiple browsers including Chrome, FF 3,4, IE 6,7,8 and during the running allow a human to visually inspect each page / action. This must support javascript so a simple browsershots approach will not work. Something like Selenium Grid may work but I haven't seen anything that would act like a console so that a human could visually inspect each test step. Ideally the answer to this question would be a tool that runs a scripted front-end test and displays those tests on each browser in a grid so that a human could visually inspect the look of each page while the test was testing the html content.
How about Cucumber Sauce?
I've not tried it purely because I do not need to run tests in parallel across multiple browsers or headless. However, I am using Cucumber BDD for almost all my web application testing. Cucumber Sauce looks like it might have solved the parallelism problem so it might work for you.
How about Telerik Test Studio http://www.telerik.com/automated-testing-tools.aspx? It can do FF 3 & 4, IE7, 8, 9 (but not IE6), Chrome and Safari. It literally hooks into the browser and drives it as if a real person was sitting there clicking things and typing text.
A couple months ago I ran into a browser that allowed users to see how different rendering engines displayed their site: Lunascape, and here are its features. As far as it validity, or accuracy goes, I cannot vouch for it (I have never used it); I can link you to a CNET review though: CNET.
So my best idea would be to use lunascape (to allow your tester to see all the engines side-by-side), then script the tests in javascript which is included in every page.
Good luck, and hope this helps.
TestComplete can do this: http://www.automatedqa.com/products/testcomplete/
You can record any interaction with an application and when the tests run you can watch them.
It supports:
Internet Explorer 6—9 support (both 32- and 64-bit versions)
Firefox 3.5—4.0 support
Open source tool Selenium, which supports many browsers and can be run as a simple record / playback tool or from code but the browser compatibility varies a bit depending on which method you choose. Google uses Selenium in a big way these days and there are plenty of good articles such as this one on their testing blog.
Very good question.
The closet tool that i think of will be HP load runner for :
the ability to visually inspect each page while the test is running and inserting break point if needed
Javascript is supported but you might have problem with asynchronous request (ajax)
Since there is alway a but :
Not all browsers are simulated.
Browsers are simulated also ...
The report will print the performance and not what was shown on the page.
The price
I do not think that visual inspection falls into automated test. Automated test is about performance and to detect regression. Visual inspection on the other side is to check if the layout is properly rendered.
Doesn't this testing depend on the size of the site to be tested? If I have a 5-10 page site, I would use some of the tools mentioned above, handle it manually (i.e. walk through the site in each browser on each platform), use browsershots.org, or use a tool within Safari, such as simulating a browser.
If the site is large, then these options become very difficult and time consuming, and my experience is that the best thing to do is make sure that each page is standards compliant, and try different pages in a few browsers.
Hope this helps.
I'm working on a large site and starting on browser compatibility next week. Just had a glance in some different browsers to have so idea of whats ahead of me and i noticed differences in FF3.5 vs FF3.
The site has been built in FF3.5/IE8. So I'm wondering if there are know issues between the two FF versions? A quick google search returned me nothing.
Regards,
Denis
Of course there are differences. Many bugs were fixed, many features implemented.
There's a list of new features in 3.5 on MDC: https://developer.mozilla.org/en/Firefox_3.5_for_developers#For_web_site_and_application_developers
...and you can get the list of all changes from bugzilla.mozilla.org, but that would be pointless, since probably only small part of them affect your app.
I think you should just try testing your app in 3.0.
didn't saw any differences between FF 3.5 and 3.0
In some rare cases you can see differences between 2.0 & 3.5 for example you want to change appearance of upload file control, but for this example differences between different browser families are more evident.
In our company we use only latest version of FF for slicing work also because generally most of FF users (80%) have upgrade their browser in first month of version release