VML in IE should only be used in quirks mode. You can use any DOCTYPE in the page and force IE into quirks mode by using the following first two lines in HTML:
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5" ><![endif]--> <!DOCTYPE html>
This will use the specified DOCTYPE in all browsers but IE.
In IE8 and IE9, which support the X-UA-Compatible directive, this will force quirks mode. In IE 6 and 7, which do no support the X-UA-Compatible directive, the DOCTYPE will be ignored because it is preceeded by non-space characters (in this case a comment which is interpreted only by IE 8 and IE 9).
The conditional comment is required for all other browsers to pick up the DOCTYPE correctly.
To use IE7 standards mode in IE 7, 8 and 9, replace IE=5 with IE=7 in the content attribute.
See this and this for details.
Experimental support for IE8 standards mode is available. The use of quirks mode or IE7 standards mode is recommended for performance reasons.
Please use the following meta tag to enable SVG in IE9:
<meta http-equiv='X-UA-Compatible' content='IE=5,IE=9'/>
Note that IE=5 is required for IE versions prior to 9 to render VML. To use
IE7 standards mode IE=5 can be replaced with IE=7.
Firefox and Webkit do not allow to programmatically focus DIVs by default. Since this affects handling of key events, here is a workaround to allow the focus to be transferred to a DIV that acts as a graph container even if a shape is clicked (click on the background works normally). The workaround is based on the fact that programmatically setting the focus on a DIV is possible if the tabindex attribute of the DIV is set as described here.
if (mxClient.IS_NS)
{
mxEvent.addListener(graph.container, 'mousedown', function()
{
if (!graph.isEditing())
{
graph.container.setAttribute('tabindex', '-1');
graph.container.focus();
}
});
}
Note that the DIV will have a focus border as a side-effect which can be disabled using outline:none CSS property. Also note that the focus is transferred normally if the DIV receives a double click, the above solution is just for single-clicks.
There is a problem in Webkit (Chrome, Safari) where HTML labels with
opacities other than 1 don't scale correctly. Try using
mxClient.NO_FO = true before rendering the graph as a
workaround for this problem.
Chrome does not load files from the local filesystem via XHR by default.
This affects the loading of resources if examples are viewed via the file://
protocol. To enable the loading of such files you should use the new flag
--allow-file-access-from-files.
See security section for 5.0.335.0 release here.
For clipped labels (overflow:hidden or mxGraph.isLabelClipped returns true) it is possible that event handling remains as if the label was unclipped. There are several browsers and versions that show this behaviour.
For labels that contain HTML markup with scrollbars in Webkit (Safari and Chrome) you should disable the use of foreignObject to make sure the HTML is not embedded in the SVG node hierarchy. This is because Webkit has a bug where mouse events are ignored in any scrollbars in a foreignObject. To disable foreignObjects, the following code can be used:
mxClient.NO_FO = mxClient.NO_FO || mxClient.IS_SF || mxClient.IS_GC;
For enabling the functionality in mxUtils.save and mxUtils.open for reading and writing local files, the security settings for the page need to be changed to enabled or prompt for Initialize and script ActiveX controls not marked as save for scripting in IE 7.
To enable local file access in Firefox, the page must be loaded using the file:// protocol. This article also states the the access works for signed scripts, however, this has not been tested.
For mxUtils.saveAs in Firefox, the same restrictions apply. However, the function may be used in IE7 without any client-side settings.
For local file access in Firefox, you may have to go to about:config and change security.fileuri.strict_origin_policy to false. (If some language properties are missing in Firefox, this is most likely the cause for the problem.) This is only required for local file access and not for production software deployed on a webserver.
Support for rotation is limited to the shape display. Text labels, handles, selection bounds and perimeter points are currently not rotated. Support for rotation is limited to SVG/VML dialects in the client, as well as the mxGraphics2DCanvas in Java and the mxGdiCanvas in C#. PHP does not currently support rotation in GD.
When adding listeners for DOM events using mxEvent in IE, which in turn uses attachEvent, then the order in which listeners are invoked for a specific event is not as listeners have been added. This is a known bug. There is no workaround for this problem.
Printing does not work in Firefox 1.5 (bug 314707). However, it works in Firefox 2.0 and later. In Internet Explorer 6 on Windows XP (no service pack) and Internet Explorer 7 on Windows Server 2003 SP1 enterprise, SP2 beta build 2825 enterprise and SP2 beta build 2805 data center there is a known issue with printing VML content created by script.
In Firefox and Internet Explorer, all content that is wider than one page is cropped when printed. Please use mxPrintPreview for printing across multiple pages.
The status bar is used to display information while the DOM is being updated. Therefore, it is not possible to display this information in the DOM (as it is being updated). Unfortunately, Firefox and IE do not allow scripts to change the status bar. (IE 6 allows it.)
To enable updates of the status bar in IE 7, you can change the security setting of the respective zone in Internet Options, Security, Custom Level, Scripting, Allow status bar updates via script.
To enable updates of the status bar in Firefox, you can set the configuration setting via about:config, dom.disable_window_status_change to false.
The latest version of IE does no longer allow to read files from the local filesystem. This means that all files must be loaded from a webserver, or the native XMLHTTP support must be disabled.
To allow loading files from the local filesystem in IE, you must disable native XMLHTTP support in Internet Options, Advanced, Security. Keep in mind that loading the client from the local filesystem should only be used for development. In production, the page containing the client and all files should be loaded from a webserver via HTTP.
In Firefox (including 2.0), the fonts are sometimes cropped at the end of a line (some pixels missing). On the Mac, the text sometimes completely disappears. The problem seems to be fixed in Firefox 3.0 for Windows. A possible workaround is to change the width of the window by at least 1 pixel.
In Firefox, the SVG-function getBBox for vertex- and edgelabels is one step behind zoom. This means, the bounding box for overlapping labels and the label background and border might appear smaller or larger than the text after zooming. The display can be updated by panning the graph at least 1 pixel.
Linefeeds are converted into 
 at encoding time. However, in shared diagram sessions the linefeeds (\n) are kept. When sending such XML back to the client all linefeeds must be replaced with 
. If you need a different encoding you can change the mxEditor.prototype.linefeed and mxSession.prototype.linefeed variables. In general, the encoding of linefeeds is specified when a DOM node is serialized using the mxUtils.getXml(node, linefeed) method. The optional linefeed argument is the string to be used for encoding linefeeds and defaults to 
.
This error (A script on this page is causing internet explorer to run slowly) in IE (all supported versions including IE 7) is triggered by the script engine executing more than 5 million operations (see http://support.microsoft.com/kb/175500). A workaround for this problem is using the threads provided with Google Gears or using worker threads in HTML 5.
Another workaround is to set the
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Styles
DWORD value of MaxScriptStatements to hex 7fffffff
and reboot. Warning: According to the Knowledge Base article, "serious
problems might occur if you modify the registry".
When using a style definition for the body or HTML element that makes the border invisible, such as none or 0px for the border-width, then there is a strange behaviour in IE after dragging cells into the graph. Another click is required to stop the respective tool from being inserted again into the graph. Currently, the only known workaround is not to use the style definition for invisible borders. Invisible borders for body and HTML elements are the default setting and the bug does not occur if the border is set to something visible, such as 1px solid black.
HTML labels are supported in SVG browsers via the mxGraph.htmlLabels switch. mxGraph.isHtmlLabel(mxCell) may be overridden to return individual values for cells. The following are known limitations for HTML labels:
In Firefox, the size of the SVG element is updated to be the size of the graph whenever the graph changes. However, since there is no resize event fired by the parent container of the SVG element, the SVG element may have to be manually resized if the parent element is larger than the graph. The effect of this is that if the container of the SVG element is made larger without updating the SVG element's size, then the SVG element (and hence the drawing area) will appear smaller than the container of the graph.
Support for Opera 9 is currently experimental. There are several known issues, such as no context menu, cropping in SVG canvas, ignored beforeunload handler and drag and drop from toolbar not working. For displaying the context menu in Opera (and on Mac), hold down the shift key while clicking the (left) mouse button.
For the context menu to appear in Safari on the Mac, hold down the shift key while clicking the (left) mouse button. Safari does not provide the beforeunload event. Also, vertical labels are not working in Safari on the Mac.
For some container positions there are artifacts in Safari and Google Chrome when repainting dynamic SVG elements (eg. highlights and previews). This is due to a bug in the Webkit repaint code. Also, the value for text opacity is currently ignored in Webkit.
The strokewidth is currently ignored in some GD implementations, as the imagesetthickness function is not working properly.
Cross-domain AJAX requests are generally not allowed, so make sure all requests are kept within the same domain of the page that contains the client. By default, XHR is used for loading the JS files (development only), the properties files (i18n) and the XML files (config). In production, there is only a single JS file which is not loaded using XHR, however, the files for i18n and configuration are still loaded using XHR and should therefore be placed in the same domain.
For example, if the translations are missing in the UI you should make sure the respective properties files are stored in the same domain as the page that contains the client. In this specific case, if you are using IIS, you should also check if the MIME type for properties files has been registered correctly. If no MIME type has been registered for the .properties extension then please do so in the IIS console under IIS, MIME types.
Note that the evaluation distribution uses a hosted version of mxClient. If you are experiencing cross-domain security problems using the evaluation version then you should upgrade to the commercial version as it includes all required files.
There is a known issue where Firefox does not load properties files from the local filesystem (file:// protocol) if the mxClient.js files is loaded from a different domain (evaluation). This problem goes away when using HTTP.
In Chrome 18 Mobile a bug prevents the keyboard from appearing after a double tap event. Another tap on the selected text can be used as a workaround. The underlying problem is that the touchend event cannot be used as a context to focus a text control on this browser, and click events are not consistently handles.