When autosize is not set to true, the page will render the dom infinitely repeatedly, causing the CPU to be at full capacity

[cppypl]

gantt.config.autosize = true When aotosize is set to true, the page will render the dom infinitely repeatedly, resulting in a CPU full load.

Here is my initialization code： ` init(ganttData) { let that = this // 甘特图的数据 let task = {} task.data = ganttData

        //Must be set to true, otherwise the problem I mentioned will occur!
        gantt.config.autosize = true

        //是否显示左侧树表格
        gantt.config.show_grid = true

        // 设置中文
        gantt.i18n.setLocale('cn')

        //表格列设置
        // 设置左侧表格的表头,拖拽宽度resize: true需要pro的收费版本才支持
        gantt.config.columns = [
            {
                name: 'text',
                label: '任务名称',
                align: 'left',
                tree: true,
                resize: true,
                width: 200,
                min_width: 100,
                max_width: 300
            },

            { name: 'start_date', label: '开始时间', resize: true, align: 'center', width: '110' },
            { name: 'end_date', label: '结束时间', resize: true, align: 'center', width: '110' },

        ]
        //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
        gantt.config.show_task_cells = true

        // 禁止任务被选中,
        gantt.config.select_task = false

        // 禁止弹出报错信息
        gantt.config.show_errors = false

        //设置x轴日期
        gantt.config.scale_unit = 'day'
        gantt.config.step = 1
        gantt.config.date_scale = '周' + '%D'

        //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
        gantt.config.fit_tasks = true

        // 在时间线上增加一行显示星期，后期可以加月、年
        gantt.config.subscales = [
            // {unit:"day",  step:1, date:"星期"+"%D" },
            // { unit: 'year', step: 1, format: '%Y' },
            { unit: 'month', step: 1, format: '%Y' + '年' + '%M' },
            { unit: 'day', step: 1, date: '%M' + '%d' + '日' }
        ]

        gantt.config.scale_height = 20 * 3

        //时间轴图表中，任务条形图的高度
        gantt.config.task_height = 10

        //时间轴图表中，甘特图的高度
        gantt.config.row_height = 38

        gantt.config.show_progress = true //取消右边表格进度条显示与拖动
        gantt.config.show_links = false //禁止连线
        gantt.config.drag_progress = false //禁止任务进度拖拽

        // 左侧表格的宽度
        gantt.config.min_grid_column_width = 100

        //从后端过来的数据格式化
        gantt.config.xml_date = '%Y-%m-%d'

        //任务条显示内容
        gantt.templates.task_text = function(start, end, task) {
            return task.text + '(' + task.duration + '天)'
        }
        // gantt.templates.task_class = function(start, end, task){return "xx";};

        //悬浮
        gantt.templates.tooltip_text = function(start, end, task) {
            return false
        }

        // 任务点击事件
        gantt.attachEvent('onTaskClick', function(targetId, ev) {
            console.log(targetId)
            if (targetId.includes('123456')) {
                // 点的是父级，不需要调用任务详情的接口
                return
            }
            // 此处可以去详情页
            that.$emit('handleView', targetId)
            // alert(id)
        })

        //禁用任务双击进入编辑事件
        gantt.attachEvent(
            'onTaskDblClick',
            function(id, e) {
                console.log('id', id, e)
                // dialogVisible.value = true
                return false
            },
            {}
        )

        // 拖拽编辑任务
        gantt.attachEvent('onAfterTaskDrag', function(id, mode, e) {
            const task = gantt.getTask(id)
            let startTime =
                `${task.start_date.getFullYear()}-${task.start_date.getMonth() + 1}-${task.start_date.getDate()}` +
                ' 00:00:00'
            let endTime =
                `${task.end_date.getFullYear()}-${task.end_date.getMonth() + 1}-${task.end_date.getDate() - 1}` +
                ' 23:59:59'
            //any custom logic here
            console.log(startTime, endTime)
            that.$emit('saveTask', {
                id,
                startTime,
                endTime
            })
        })

        // 周末的颜色加重
        gantt.templates.timeline_cell_class = (item, date) => {
            if (date.getDay() === 0 || date.getDay() === 6) {
                return 'weekend'
            }
            return ''
        }

        // 给甘特图添加一些插件功能，比如弹框、当前时间线
        gantt.plugins({
            tooltip: false,
            marker: true,
            quick_info: false // 快速信息框
        })

        let today = new Date() // 今天
        gantt.addMarker({
            start_date: today,
            css: 'today',
            text: '今日'
        })

        // 甘特图图表宽度自适应
        gantt.config.autofit = true

        // 用户可以通过拖拽调整行高
        gantt.config.resize_rows = true

        // 图表项目栏可以任意拖拽（任意节点下)
        gantt.config.order_branch = true
        gantt.config.order_branch_free = true
        // 允许拖放
        gantt.config.drag_project = true

        //任务栏周末亮色
        gantt.templates.timeline_cell_class = function(item, date) {
            if (date.getDay() == 0 || date.getDay() == 6) {
                return 'weekend'
            }
        }
        //任务条上的文字大小 以及取消border自带样式
        gantt.templates.task_class = function(start, end, item) {
            return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
        }

        // 初始化
        gantt.init(this.$refs.gantt)

        gantt.parse(task)
    }`

Has anyone encountered this problem？

[cppypl]

@gearcoded

[gearcoded]

@cppypl, It is a bug in Gantt that it constantly repaints itself. The bug occurs with the specific page/frame sizes when the container's width or height is set to a percent value. If the container has the fixed sizes like 800px, the bug is not reproduced. The bug will be fixed in the next update, but I cannot give you any ETA.

If you have the license, you can submit a support request to the email specified in the letter with the license and include the link to this issue. Then we'll share a build with the fix.

Also, you have an obsolete scale configuration, so it will not work as expected in some cases.

You need to include all the scales inside the gantt.config.scales parameter:

// remove this
gantt.config.scale_unit = 'day'
gantt.config.step = 1
gantt.config.date_scale = '周' + '%D'

// use "scales"
gantt.config.scales = [
  // {unit:"day",  step:1, date:"星期"+"%D" },
  // { unit: 'year', step: 1, format: '%Y' },
  { unit: 'month', step: 1, format: '%Y' + '年' + '%M' },
  { unit: 'day', step: 1, date: '%M' + '%d' + '日' },
  { unit: 'day', step: 1, date: '周%D' }
]

https://docs.dhtmlx.com/gantt/migrating.html#6162:~:text=%3D%20false%3B-,Time%20scale%20settings,-Configuration%20of%20time