Chrome crash: area zoom with vertical dashline

[villeingman]

Hey,
Mac Chrome crashes with "Aw, snap" message when running the following chart and zooming in "quickly".

$(function () {
$('#container').highcharts(
{ "chart": { "type": "scatter", "zoomType": "xy", "borderWidth": 0 }, "title": { "text": "" }, "xAxis": { "title": { "text": "Distance" }, "lineColor": "#CCCCCC", "axisIndex": 0 }, "yAxis": { "min": 0, "max": 20, "title": { "text": "X-Axis" }, "axisIndex": 0 }, "legend": { "layout": "vertical", "align": "right", "verticalAlign": "top", "x": -10.0, "y": 100.0, "borderWidth": 0 }, "credits": { "enabled": false }, "series": [ { "data": [ [ 0, 0 ], [ 0, 20 ] ], "name": "VerticalLine", "visible": true, "marker": { "enabled": false }, "dashStyle": "ShortDot", "showInLegend": true, "enableMouseTracking": false, "color": "#660066", "type": "line" } ], "exporting": { "enabled": false }
}); });

See running example here: http://jsfiddle.net/9YM6H/

I'm running Mac Chrome Version 35.0.1916.153.

[ghost]

I recreated the chart as a fiddle here: http://jsfiddle.net/2eBE2/
Using Chrome on Windows zooming in repetitively very quick does indeed result in a crash.

(Just out of curiosity: why not use a plotLine for this setup ?)

[pawelfus]

Creash should be fixed, but line series requires sorted data, right? Like in docs.

I would try to use scatter series with lineWidth: 1, like this: http://jsfiddle.net/2eBE2/1/

[Artur-]

Created a Chrome bug for this: https://code.google.com/p/chromium/issues/detail?id=389507

[vijayasekaran]

Hi Artur ,

         Any update on Chrome Bug report ? . I am not able to access , it says i don't have permission to view the ticket . I have commented the same in http://dev.vaadin.com/ticket/13657 (vaadin trac)

[vaadin-miki]

I tested the abovementioned fiddles in Firefox 33 in Windows 7 and I can still crash the browser when I zoom really, really fast. Other browsers (IE11 in Windows 7, Chrome 39 and Firefox 24 on OSX) seem to reset the zoom after some point.

[vijayasekaran]

Hi ,
Correction is already available for this issue ? Could you please tell what is the Latest Estimate(Correction plan) for this issue .

[vijayasekaran]

Hi ,
What is latest estimation (correction plan) for this issue ?

[TorsteinHonsi]

Hi @vijayasekaran, we will look into this immediately.

[TorsteinHonsi]

For the records, I created a reliable reproduction that always crashes after 18 iterations in my copy of Chrome. JSFiddle is down at the moment, but here's the code that can be pasted in:

HTML

<script src="http://code.highcharts.com/4.0.4/highcharts.js"></script>


<div id="container" style="width: 400px; height: 400px; "></div>

<button id="start">Start</button>

JavaScript

$(function () {

    $('#container').highcharts({
        "chart": {
            "animation": false,
            "zoomType": "xy"
        },
        title: null,
        xAxis: {
            gridLineWidth: 0,
            tickLength: 0,
            title: null,
            lineWidth: 0,
            labels: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
        yAxis: {
            min: 0,
            max: 20,
            gridLineWidth: 0,
            tickLength: 0,
            title: null,
            lineWidth: 0,
            labels: {
                enabled: false
            }
        },
        legend: {
            enabled: false
        },
        "series": [{
            "data": [
                [0, 0],
                [0, 20]
            ],
            "dashStyle": "shortdot"
        }]

    });

    var i = 0;
    $('#start').click(function () {
        var chart = $('#container').highcharts(),
            dur = 100, // duration of the selection zoom operation
            time = 200, // repetition time between each zooming
            interval,
            offset = $('#container').offset();

        interval = setInterval(function () {
            console.log('Zoom #' + i++);
            chart.pointer.onContainerMouseDown({
                type: 'mousedown',
                pageX: offset.left + 150,
                pageY: offset.top + 75
            });

            chart.pointer.onContainerMouseMove({
                type: 'mousemove',
                pageX: offset.left + 300,
                pageY: offset.top + 220
            });
            chart.pointer.onDocumentMouseUp({});
        }, time);
    });
});

[alvarezguille]

Hi,

I've been testing the mentioned commit eb5906d and the example in previous post and if I add an horizontal line it can still be reproduced.

This is the working example using the patch or latest release which includes the patch 4.1.1

• Using 4.1.1: http://jsfiddle.net/9wku48nd/
• Using patch: http://jsfiddle.net/htdocwa5/

This is the modified example that fails in both versions:

• Using 4.1.1: http://jsfiddle.net/wsfcuu1o/
• Using patch: http://jsfiddle.net/x06jfgg1/

I'm testing in chrome 40 for windows