Custom dataZoom slider handle icons have different sizes

### Version
5.2.0

### Steps to reproduce
Try this dataZoom option:

```javascript
dataZoom: [
{
type: 'slider',
start: 0,
end: 10,
handleIcon: 'image://https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1',
handleSize: '100%'
}
],
```

Or the full option (modified from https://echarts.apache.org/examples/zh/editor.html?c=area-simple), as below:

```javascript
let base = new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i ) {
var now = new Date((base = oneDay));
date.push([now.getFullYear(), now.getMonth() 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 data[i - 1]));
}
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: 'Large Area Chart'
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'slider',
start: 0,
end: 10,
handleIcon: 'image://https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1',
handleSize: '100%'
}
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: data
}
]
};
```

### What is expected?
Two handle icons have same size.

### What is actually happening?
Left handle icon is smaller than right one.


---
Only apears when handleIcon is start with "image://".