title: In a multiple column layout my highchart is not visible in Safari
body: <p>I've written a fiddle (<a href="http://jsfiddle.net/929Zb/5/" rel="nofollow noreferrer">http://jsfiddle.net/929Zb/5/</a>) for this that reduces the problem to the minimal markup that demonstrates the problem... which is my Highchart isn't being rendered in Safari (version 5.1.7 on Windows but I've also run it in the latest version on a MacBook.)</p>
  
  <p>My requirement is a multiple column layout of widget as shown in this screenshot from the fiddle running in chrome :</p>
  
  <p><img src="https://i.stack.imgur.com/ZIbSG.png" alt="Chrome correctly displaying the chart"></p>
  
  <p>and here's the same thing running in Safari :</p>
  
  <p><img src="https://i.stack.imgur.com/ew561.png" alt="Safari does not show the chart"></p>
  
  <p>Safari has rendered SVG and hovering over it in debug highlights the elements in blue in the HTML but it just can't be seen!!</p>
  
  <p>The css I'm using to display the column is shown below. If you change the column count from 2 to 1 the chart displays fine in Safari!!</p>
  
  <pre><code>.widget-container
  {
      -webkit-column-count: 2;
      -webkit-column-gap: 2em;
      -moz-column-count: 2;
      -moz-column-gap: 2em;
      column-count: 2;
      column-gap: 2em;
  }
  .widget {
      /* This is required to keep the widget div's together and not break them over columns  */
      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;
  margin-bottom: 2em; 
  }
  </code></pre>
  
  <p>Is there a change to the CSS that will make Safari work or will this require a javascript fix? I pondered whether this was something to do with CSS transitions so tried turning off animations but given it's still animating I've clearly got the syntax wrong. I have a time constraint on this problem so I'm posting now but will report back if I have any progress.</p>