This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new f65cd55 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.
f65cd55 is described below
commit f65cd55a7dc8115cddd061b4dbd9947752c8ec75
Author: SHUANG SU <[email protected]>
AuthorDate: Fri Nov 1 00:41:19 2019 +0800
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.
---
test/-cases.js | 1 +
test/ios13-z-bug.html | 353 ++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 354 insertions(+)
diff --git a/test/-cases.js b/test/-cases.js
index c36293f..676b67f 100644
--- a/test/-cases.js
+++ b/test/-cases.js
@@ -33,6 +33,7 @@
'touch-test.html',
'touch-candlestick.html',
'tooltip-touch.html',
+ 'ios13-z-bug.html',
'bar.html',
'line.html',
'geoLine.html',
diff --git a/test/ios13-z-bug.html b/test/ios13-z-bug.html
new file mode 100644
index 0000000..358ea04
--- /dev/null
+++ b/test/ios13-z-bug.html
@@ -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>
+
+
+
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
