提交 f65cd55a 编写于 作者: S SHUANG SU 提交者: sushuang

fix: add test case for ios13 z order bug.

The bug is fixed in: https://github.com/ecomfe/zrender/pull/522
IOS13 safari probably has a compositing bug (z order of the canvas and the consequent
dom does not act as expected) when some of the parent dom has
`-webkit-overflow-scrolling: touch;` and the webpage is longer than one screen and
the canvas is not at the top part of the page.
Check `https://bugs.webkit.org/show_bug.cgi?id=203681` for more details.
上级 b3057ac6
......@@ -33,6 +33,7 @@
'touch-test.html',
'touch-candlestick.html',
'tooltip-touch.html',
'ios13-z-bug.html',
'bar.html',
'line.html',
'geoLine.html',
......
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>css</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
#main {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="app" >
<div id="main">
<div>
Check that the tooltip should not below the chart on the<br>
<strong>Safari of IOS13</strong>.<br>
(See <a href="https://bugs.webkit.org/show_bug.cgi?id=203681" target="_blank">Webkit Bug Trace</a>)<br>
The bug can be reproduced by:<br>
(1) `-webkit-overflow-scrolling: touch;` is used<br>
(2) The webpage is over one screen<br>
(3) The chart (or only canvas) is not at the top part.<br>
</div>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
<div data-v-2d2d8774="" data-v-224ed8cc="" class="app-details c-bg-color-gray">
<div data-v-2d2d8774="">
<div data-v-75831cfc="" data-v-2d2d8774="" class="trend c-bg-color-white c-gap-inner-left c-gap-inner-right c-gap-inner-bottom">
<div data-v-75831cfc="" class="ve-line" style="
width: auto;
position: relative;
height: 247.5px;
">
<div class="" id="aaa" style="height: 247.5px;">
</div>
</div>
</div>
</div>
</div>
<!--
<div class="" _echarts_instance_="ec_1234567" style="
width: auto;
position: relative;
-webkit-tap-highlight-color: transparent;
user-select: none;
height: 247.5px;
">
<div style="
position: relative;
/* overflow: hidden; */
width: 355px;
height: 248px;
padding: 0px;
margin: 0px;
border-width: 0px;
cursor: default;
">
<canvas id="bbb" data-zr-dom-id="zr_0" width="1065" height="744" style="
position: absolute;
/* position: static; */
left: 0px;
top: 0px;
width: 355px;
height: 248px;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0px;
margin: 0px;
border-width: 0px;
"></canvas>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; left: 0px !important; top: 0px !important; right: auto !important; bottom: auto !important;"></div>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; right: 0px !important; top: 0px !important; left: auto !important; bottom: auto !important;"></div>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; left: 0px !important; bottom: 0px !important; right: auto !important; top: auto !important;"></div>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; right: 0px !important; bottom: 0px !important; left: auto !important; top: auto !important;"></div>
</div>
<div style="
position: absolute;
display: block;
border-style: solid; white-space: nowrap;
transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
background-color: rgba(50, 50, 50, 0.7);
border-width: 0px;
border-color: rgb(51, 51, 51);
border-radius: 4px;
color: rgb(255, 255, 255);
font: 14px/21px sans-serif;
padding: 5px; left: 82.925px;
top: 27.7102px;
z-index: 99999;
pointer-events: none;
">2019/09/18 星期三 <br> DAU (日) : 123.6<br>日环比:-9.9%<br>年同比:-6.6%</div>
</div> -->
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
</div>
</div>
<script src="../dist/echarts.js?_v_=123"></script>
<script>
var option = {
"legend": {
"left": "right",
"top": "2%"
},
"xAxis": [{
"type": "category",
"nameLocation": "middle",
"nameGap": 22,
"name": "",
"axisTick": {
"show": true,
"lineStyle": {
"color": "#eee"
}
},
"show": true,
"splitNumber": 30,
"axisLabel": {
"interval": "auto"
}
}],
"series": [{
"type": "line",
"data": [
["2016/10/000000", "15.00"],
["2016/10/000000", "15.00"],
["2016/10/000000", "15.00"],
["2016/10/000000", "15.00"],
["2016/11/000000", "15.00"],
["2016/11/000000", "15.00"],
["2016/11/000000", "15.00"],
["2016/11/000000", "15.00"],
["2016/12/000000", "15.00"],
["2016/12/000000", "15.00"],
["2016/12/000000", "15.00"],
["2016/12/000000", "15.00"],
["2017/01/000000", "15.00"],
["2017/01/000000", "15.00"],
["2017/01/000000", "15.00"],
["2017/01/000000", "15.00"],
["2017/01/000000", "15.00"],
["2017/02/000000", "15.00"],
["2017/02/000000", "15.00"],
["2017/02/000000", "15.00"],
["2017/02/000000", "15.00"],
["2017/03/000000", "15.00"],
["2017/03/000000", "15.00"],
["2017/03/000000", "15.00"],
["2017/03/000000", "15.00"],
["2017/04/000000", "15.00"],
["2017/04/000000", "15.00"],
["2017/04/000000", "15.00"],
["2017/04/000000", "15.00"],
["2017/05/000000", "15.00"],
["2017/05/000000", "15.00"],
["2017/05/000000", "15.00"],
["2017/05/000000", "15.00"],
["2017/05/000000", "15.00"],
["2017/06/000000", "15.00"],
["2017/06/000000", "15.00"],
["2018/02/000000", "15.00"],
["2018/02/000000", "15.00"],
["2018/02/000000", "15.00"],
["2018/02/000000", "15.00"],
["2018/03/000000", "15.00"],
["2018/03/000000", "15.00"],
["2018/03/000000", "15.00"],
["2018/03/000000", "15.00"],
["2018/04/000000", "15.00"],
["2018/04/000000", "15.00"],
["2018/04/000000", "15.00"],
["2018/04/000000", "15.00"],
["2018/04/000000", "15.00"],
["2018/05/000000", "15.00"],
["2018/05/000000", "15.00"],
["2018/05/000000", "15.00"],
["2018/05/000000", "15.00"],
["2018/06/000000", "15.00"],
["2018/06/000000", "15.00"],
["2018/06/000000", "15.00"],
["2018/06/000000", "15.00"],
["2018/07/000000", "15.00"],
["2018/07/000000", "15.00"],
["2018/07/000000", "15.00"],
["2018/07/000000", "15.00"],
["2018/07/000000", "15.00"],
["2018/08/000000", "15.00"],
["2018/08/000000", "15.00"],
["2018/08/000000", "15.00"],
["2018/08/000000", "15.00"],
["2018/09/000000", "15.00"],
["2018/09/000000", "15.00"],
["2018/09/000000", "15.00"],
["2018/09/000000", "15.00"],
["2018/10/000000", "15.00"],
["2018/10/000000", "15.00"],
["2018/10/000000", "15.00"],
["2018/10/000000", "15.00"],
["2018/10/000000", "15.00"],
["2018/11/000000", "15.00"],
["2018/11/000000", "2.00"],
["2018/11/000000", "2.00"],
["2018/11/000000", "2.00"],
["2018/12/000000", "2.00"],
["2018/12/000000", "2.00"],
["2018/12/000000", "7.00"],
["2018/12/000000", "7.00"],
["2018/12/000000", "7.00"],
["2019/01/000000", "7.00"],
["2019/01/000000", "7.00"],
["2019/01/000000", "2.00"],
["2019/01/000000", "2.00"],
["2019/02/000000", "2.00"],
["2019/02/000000", "2.00"],
["2019/02/000000", "2.00"],
["2019/02/000000", "3.00"],
["2019/03/000000", "12.00"],
["2019/03/000000", "12.00"],
["2019/03/000000", "12.00"],
["2019/03/000000", "12.00"],
["2019/04/000000", "12.00"],
["2019/04/000000", "12.00"],
["2019/04/000000", "12.00"],
["2019/04/000000", "12.00"],
["2019/04/000000", "12.00"],
["2019/05/000000", "12.00"],
["2019/05/000000", "3.00"],
["2019/05/000000", "3.00"],
["2019/05/000000", "2.00"],
["2019/06/000000", "2.00"],
["2019/06/000000", "62.00"],
["2019/06/000000", "62.00"],
["2019/06/000000", "62.00"],
["2019/07/000000", "62.00"],
["2019/07/000000", "63.00"],
["2019/07/000000", "63.00"],
["2019/07/000000", "63.00"],
["2019/07/000000", "63.00"],
["2019/08/000000", "63.00"],
["2019/08/000000", "62.00"],
["2019/08/000000", "63.00"],
["2019/08/000000", "63.00"],
["2019/09/000000", "63.00"],
["2019/09/000000", "63.00"],
["2019/09/000000", "3.00"],
["2019/09/000000", "2.00"],
["2019/09/000000", "2.00"],
["2019/10/000000", "2.00"],
["2019/10/000000", "3.00"]
],
"showSymbol": false
}],
"yAxis": {
"scale": true,
"axisLabel": {
"margin": -10,
"verticalAlign": "bottom"
},
"axisTick": {
"show": false
},
"offset": -5
},
"tooltip": {
"trigger": "axis"
},
"color": ["#549ef4"],
"grid": [{
"x": "2%",
"y": "20%",
"width": "96%",
"height": "78%"
}],
"dataZoom": [{
"type": "inside",
"start": 80,
"end": 100
}]
};
var chart = echarts.init(document.getElementById('aaa'));
chart.setOption(option);
</script>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册