Rendering Issue in Safari

cryarbrough · November 18, 2015

I'm running into an issue rendering jchartfx in Safari. When the chart is loaded with coreVector, the colors and gradients aren't rendering, creating a chart that has a black background, and black bar graphs.

When the same data is used to with coreBasic, the chart renders as expected, and when rendered with coreVector3d, the chart renders the 3d components as expected, but the background is still black.

Further, this odd rendering only occurs when I have a query parameter in the url, even when the query is otherwise unused & unrelated to the app. When rendered in Chrome or Firefox, the results are a flattened chart similar to coreBasic, instead of the expected gradient rendering.

I've attached the rendered HTML, which is produced via an Ember MVC app, as well as screenshots of all the different charts produced. As it's an app, the jchartfx source in consolidated in the vendor.js file, but includes jchartfx.system.js, jchartfx.coreVector, jchartfx.coreVector3d & jchartfx.animation.js.

I've been digging at this for some time now, so I'm hoping I've just missed something.

Thanks is advance.

index-safari.html

JuanC · November 18, 2015

Are you including any css related to jChartFX? Are you defining any jChartFX related rules in any of your CSSs?

jChartFX have 2 modes of operation

1) If you do not include any of our CSS, we will generate all the elements in the chart with "hardcoded" colors in the resulting HTML. In this mode to change one of the colors you would use one of our APIs

<!DOCTYPE html>

<html>

<head>

</script>

</script>

var chart1;

function onLoadDoc()

{

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Bar);

chart1.setDataSource([10,12,14,8]);

chart1.getLegendBox().setVisible(false);

chart1.setBorder(null);

chart1.getAxisX().setVisible(false);

chart1.getAxisY().setVisible(false);

chart1.create("myDiv");

}

</script>

</head>

</body>

</html>

If you select Inspect Element in your browser you should see something like this

2) If you include our CSS (note that we ship a set of palettes and a set of attributes, normally you would include one of each), then jChartFX will generate the chart elements using classes. In this mode you would change colors by modifying the appropriate entries in the CSS

HTML same as 1 but include these 2 inside the head element

If you select Inspect Element in your browser you should see something like this

------

Your page seems to be using CSS, I would recommend you make sure you are including one of our palettes and attributes, also make sure these CSSs are up-to-date in relation to the scripts, i.e. they were downloaded at the same time.

Finally you can use Inspect Element to find out why the background is black, you will probably find a rectangle with class Border, and the palette CSS should have a rule for it.

Hope this helps.

If you cannot fix the problem, try modifying these simple pages with your code/css/js until you can reproduce the problem, that will allow you to find out what is causing the issue and/or send the page to us so that we can reproduce the issue on a small page.

JuanC

cryarbrough · November 19, 2015

So, as it turns out, this was due to the existence of the <base href="/"> tag used by JS MVC frameworks, which causes issues with SVG fills.

Fixing it involved forcing the urls for fills to an absolute path that matched the full current url of the app.

Sign In

Rendering Issue in Safari

Question

cryarbrough

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

JuanC

Link to comment

Share on other sites

cryarbrough

Link to comment

Share on other sites

Join the conversation

Browse

Activity