Databases
StackOverflow2013
Postsdbo
POIn a multiple column layout my highchart is not visible in Safari
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIn a multiple column layout my highchart is not visible in Safari
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload