The Puppet Labs Issue Tracker has Moved: https://tickets.puppetlabs.com

Bug #4530

Dashboard doesn't display usefully under Internet Explorer 8.

Added by Brett Maton over 3 years ago. Updated about 1 year ago.

Status:ClosedStart date:08/13/2010
Priority:NormalDue date:
Assignee:Daniel Sauble% Done:

0%

Category:-
Target version:-
Keywords: customer Affected URL:
Branch: Affected Dashboard version:

Description

Puppet-Dashboard doesn’t display graphs on IE8 and the layout has shifted (probably due to missing graphs).

Not a huge problem, just suitably unimpressed managers ;) Screen shot attached (host names removed, not missing from actual page)

puppet-IE8.png - IE8 Screen Shot (62.1 KB) Brett Maton, 08/13/2010 08:53 am

dashboard_under_IE8.png (113 KB) Daniel Sauble, 09/23/2011 01:33 pm

dashboard-1.2.1-ie8-800x600.PNG - dashboard 1.2.1 on IE8 at 800x600 resolution (52.6 KB) John Warburton, 09/28/2011 12:19 am

ie8-small-window.jpg (328 KB) Randall Hansen, 09/28/2011 07:16 pm

dashboard-1.2.1-e1e9492-ie8.PNG (131 KB) John Warburton, 09/28/2011 10:10 pm

dashboard-1.2.1-ie8-nocompatabilitymode.PNG (160 KB) John Warburton, 09/29/2011 11:48 pm

History

#1 Updated by Igal Koshevoy over 3 years ago

  • Status changed from Unreviewed to Accepted

#2 Updated by T.J. Yang about 3 years ago

http://projects.puppetlabs.com/issues/6651 is a duplicate of this issue report.

#3 Updated by James Turnbull almost 3 years ago

  • Status changed from Accepted to Needs Decision
  • Assignee set to Nigel Kersten

#4 Updated by Nigel Kersten almost 3 years ago

  • Tracker changed from Refactor to Bug
  • Subject changed from Puppet-Dashboard Internet Explorer to Dashboard doesn't display usefully under Internet Explorer 8.
  • Status changed from Needs Decision to Accepted
  • Assignee deleted (Nigel Kersten)

The goal here is not to attain pixel-perfect rendering compatibility across browsers, but simply to produce a useful display under IE 8.

#5 Updated by Randall Hansen over 2 years ago

  • Assignee set to Daniel Sauble

#6 Updated by Daniel Pittman over 2 years ago

Daniel, can you please update this ticket with the status of this work?

#7 Updated by Daniel Sauble over 2 years ago

I’ve been occupied with Riddler, and haven’t been able to give this much attention. It appears that IE8 doesn’t support SVG natively, which explains the absence of the graphs. Apparently, SVG support can be added via a Flash plugin, but until I get a VM installed on my machine I won’t be able to investigate this further. The plan is to start on this next week.

#8 Updated by Daniel Sauble over 2 years ago

I brought up Dashboard under IE8 this morning, and the graphs appear to display in a usable fashion (see attached). The only artifacts I can see is that the background of the graph is black (not white), and the x-axis titles are shifted up slightly, but nothing serious. Looking at the markup, SVG isn’t even used in this particular graph (open question: is it used elsewhere?).

The charting library used by Dashboard is Grafico, which is based on Raphaël, which, apparently, supports IE6+ by falling back to VML when SVG support isn’t available. So, in theory, there shouldn’t be a reason for graphs not being displayed under IE8. Next week I’ll be investigating this further: (1) by triggering a case where SVG/VML graphs are compiled, then (2) evaluating the output to ensure IE is being fed VML and rendering it correctly.

#9 Updated by Daniel Sauble over 2 years ago

  • Status changed from Accepted to Investigating

This appears to be a non-issue with the current release. When displaying run time graphs, IE8 is fed VML and renders it correctly. I suggest this issue be closed.

#10 Updated by Daniel Sauble over 2 years ago

  • Status changed from Investigating to Closed

#11 Updated by John Warburton over 2 years ago

  • File dashboard-1.2.1-ie8.PNG added
  • Status changed from Closed to Re-opened

I am getting different results with IE8 on Windows XP. See attached screen shot “dashboard 1.2.1 on IE8”

I have been getting this behavior since the 1.0 days

#12 Updated by John Warburton over 2 years ago

My default resolution is 1280x1024

Randall asked in an email if it was 1024 resolution killing it. Apparently not. See attached screen shot at 800x600 resolution

#13 Updated by Randall Hansen over 2 years ago

I’m puzzled; Daniel’s fix seems to me to have worked. This is Dashboard running out of master, version 1.2.1-24-ge1e9492, on IE8 on Windows 7. It’s not pretty when the display’s compressed to 300 pixels, but the layout doesn’t blow up.

#15 Updated by John Warburton over 2 years ago

I’ve pulled head from master (https://github.com/puppetlabs/puppet-dashboard/commit/e1e949222f95bf0468947eb6fdc480396b543e73) and have something better, but still out of whack

#16 Updated by John Warburton over 2 years ago

Confirmed note 15 is consistent with IE8 on Windows 7 and XP SP3 Build 2600

#17 Updated by James Turnbull over 2 years ago

  • Status changed from Re-opened to Accepted

#18 Updated by Randall Hansen over 2 years ago

John, you’re seeing all sorts of differences that puzzle me:

  • There are no bullets between the navigation items.
  • The background tasks “All systems go” message is italicized.
  • There are no bars under the node counts in the sidebar navigation.
  • There’s text (“unknown”) instead of the Dashboard logo.

I can’t believe all these differences are attributable to the minor differences between our versions of IE8 (you: 8.0.6x, me: 8.0.7x). I’ve tried running in production mode, removing all plugins, and installing a brand new copy of Dashboard. I still see the same thing locally.

I think there’s a CSS malfunction on your end. The italicized “All systems go” makes me very suspicious. This is overridden explicitly in application.css (compiled to all.css in production). If you were getting current CSS this text would be normal, not italic.

Will you try deleting [dashboard]/public/stylesheets/all.css? If that doesn’t help, is it possible for you to attach the full HTML of that page and a copy of all.css? I can’t think how else to continue debugging this.

#19 Updated by Randall Hansen over 2 years ago

Oh, and here’s the obvious thing: how does this look in other browsers? Do you still see the anomalies I listed above?

#20 Updated by John Warburton over 2 years ago

Found the issue. Our company configures IE8 to be in “compatibility mode” to presumably support older web sites on our Intranet

I can only turn that off in developer mode (F12 > Browser Mode > Internet Explorer 8), and get a reasonable looking effort (attached)

I can’t change my compatibility view settings, and worse if its on for one page, its on for all pages in that domain :(

Please close the bug – this is an internal issue I need to resolve. You may want to note compatibility mode – many orgs may have implemented it

From the IE 8 help:

Why don’t some websites display correctly in Internet Explorer 8? Websites that were designed for earlier versions of Internet Explorer might not display correctly in the current version. However, you can often improve how a website will look in Internet Explorer by using a new feature called Compatibility View.

When you turn on Compatibility View, the webpage you’re viewing—as well as any other webpages within the website’s domain—will be displayed as if you were using an earlier version of Internet Explorer.

To turn on Internet Explorer Compatibility View

Open Internet Explorer. Click the Tools button, and then click Compatibility View.

#21 Updated by Randall Hansen over 2 years ago

  • Status changed from Accepted to Closed
  • Target version set to 152

#22 Updated by James Turnbull over 2 years ago

  • File deleted (dashboard-1.2.1-ie8.PNG)

#23 Updated by Daniel Pittman about 2 years ago

  • Target version deleted (152)

#24 Updated by Tim Eilers almost 2 years ago

You don’t need to reopen this issue, i just want to give a hint for people who have the same problem, but do not have the possibility to turn the compability mode off intranet-wide (this is the situation in my company).

I searched for a option to turn off compatility mode from server side and found two solutions:

manipulate the layout file of the dashboard

Edit app/views/layouts/application.html.haml and add directly after the “%title…” line this one:

%meta{ :content => "IE=Edge", "http-equiv" => "X-UA-Compatible" }

and restart webserver. => bad solution because dashboard updates could remove that

set additional headers in webserver

I did that in apache, i think the solutions for other webservers are similar. Make shure mod_headers module is loaded and then add this line to your vhost configuration:

Header add X-UA-Compatible "IE=Edge"

and restart webserver.

There a stil some very tiny issues, but you can work with that mode. But keep in mind that “Edge” says to IE he should use the newest features and standards – so maybe the layout gets broken again if microsoft releases a IE 10 or 11 or whatever ;)

#25 Updated by John Warburton over 1 year ago

Brilliant Tim!

#26 Updated by Charlie Sharpsteen about 1 year ago

  • Keywords set to customer

Also available in: Atom PDF