Skip to content

BrowserCompatibility

Jump to bottom
jebeck edited this page Sep 4, 2014 · 4 revisions

Gotchas regarding tideline and browser compatibility:

  • Firefox hasn't implemented the baseline-shift attribute in SVG <text> so the magical hack of dominant-baseline: hanging; baseline-shift: super; for a "floating" baseline doesn't work :( (Bugzilla link)

  • Firefox hasn't implemented the letter-spacing attribute in SVG <text>. This only affects the "headline" of each stats widget "puddle" and at the moment, I haven't attempted to find another way to do it in Firefox, I'm just leaving the headlines in Firefox without the kerning adjustment. (Bugzilla link)

  • Safari doesn't support .getBBox() (on elements that have not yet entered the DOM? not sure of the specific conditions in this case). NB: .getBBox() does not fail gracefully; this has the potential to cause a fatal JavaScript Error that will crash the entire app! Solution: replace all instances of .getBBox() with .getBoundingClientRect().

  • Internet Explorer of all versions and flavors has not yet implemented SVG <foreignObject>. This is a huge problem, since we use <foreignObject> heavily in tooltips (as well as in some other places). (Reference)

  • Internet Explorer does not support SVG at all prior to IE 9. (Reference) However, it is unclear how much of the SVG spec IE 9 in particular might support, and that is the version of IE we are likely to need to support for UCSF according to a comment on this Trello card. We need to find a way to install IE 9 on one of our laptops in order to even start being able to test this.

  • The implementation of the box model for the inner HTML <body> inside an SVG <foreignObject> varies across browsers. In Firefox, the <body> inner box (exclusive of margin) will be aligned with the y-value of the <foreignObject>. In other browsers, the outer box is aligned with the y-value. Accordingly, the top margin should always be set to zero in the CSS to ensure consistent positioning of <foreignObject> contents across browsers.

Clone this wiki locally