Skip to content

Commit

Permalink
fix: add test case for ios13 z order bug.
Browse files Browse the repository at this point in the history 
The bug is fixed in: ecomfe/zrender#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.
  • Loading branch information
@100pah
100pah committed Nov 1, 2019
1 parent b3057ac commit f65cd55
Show file tree
Hide file tree
Showing 2 changed files with 354 additions and 0 deletions.
1 change: 1 addition & 0 deletions test/-cases.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
'touch-test.html',
'touch-candlestick.html',
'tooltip-touch.html',
'ios13-z-bug.html',
'bar.html',
'line.html',
'geoLine.html',
Expand Down
353 changes: 353 additions & 0 deletions test/ios13-z-bug.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,353 @@
<!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>



0 comments on commit f65cd55

Please sign in to comment.