You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/10/31 16:31:21 UTC
[incubator-echarts] 01/01: 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.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/ios13-z-bug
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit abf356298658a609333aa369cae11a7877f52740
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Fri Nov 1 00:30:36 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 | 389 ++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 390 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..c51eb51
--- /dev/null
+++ b/test/ios13-z-bug.html
@@ -0,0 +1,389 @@
+<!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_1572512931066" 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 (日) : 3.79<br>日环比：-1.3%<br>年同比：-2.2%</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"
+ }
+ },
+ "data": ["2016/10/10~2016/10/16", "2016/10/17~2016/10/23", "2016/10/24~2016/10/30", "2016/10/31~2016/11/06", "2016/11/07~2016/11/13", "2016/11/14~2016/11/20", "2016/11/21~2016/11/27", "2016/11/28~2016/12/04", "2016/12/05~2016/12/11", "2016/12/12~2016/12/18", "2016/12/19~2016/12/25", "2016/12/26~2017/01/01", "2017/01/02~2017/01/08", "2017/01/09~2017/01/15", "2017/01/16~2017/01/22", "2017/01/23~2017/01/29", "2017/01/30~2017/02/05", "2017/02/06~2017/02/12", "2017/02/13~2017/02/1 [...]
+ "show": true,
+ "splitNumber": 30,
+ "axisLabel": {
+ "interval": "auto"
+ }
+ }],
+ "series": [{
+ "name": "DAU (周) ",
+ "type": "line",
+ "data": [
+ ["2016/10/10~2016/10/16", "2.00"],
+ ["2016/10/17~2016/10/23", "2.00"],
+ ["2016/10/24~2016/10/30", "2.00"],
+ ["2016/10/31~2016/11/06", "2.00"],
+ ["2016/11/07~2016/11/13", "2.00"],
+ ["2016/11/14~2016/11/20", "2.00"],
+ ["2016/11/21~2016/11/27", "2.00"],
+ ["2016/11/28~2016/12/04", "2.00"],
+ ["2016/12/05~2016/12/11", "2.00"],
+ ["2016/12/12~2016/12/18", "2.00"],
+ ["2016/12/19~2016/12/25", "2.00"],
+ ["2016/12/26~2017/01/01", "2.00"],
+ ["2017/01/02~2017/01/08", "2.00"],
+ ["2017/01/09~2017/01/15", "2.00"],
+ ["2017/01/16~2017/01/22", "2.00"],
+ ["2017/01/23~2017/01/29", "2.00"],
+ ["2017/01/30~2017/02/05", "2.00"],
+ ["2017/02/06~2017/02/12", "2.00"],
+ ["2017/02/13~2017/02/19", "2.00"],
+ ["2017/02/20~2017/02/26", "2.00"],
+ ["2017/02/27~2017/03/05", "2.00"],
+ ["2017/03/06~2017/03/12", "2.00"],
+ ["2017/03/13~2017/03/19", "2.00"],
+ ["2017/03/20~2017/03/26", "2.00"],
+ ["2017/03/27~2017/04/02", "2.00"],
+ ["2017/04/03~2017/04/09", "2.00"],
+ ["2017/04/10~2017/04/16", "2.00"],
+ ["2017/04/17~2017/04/23", "2.00"],
+ ["2017/04/24~2017/04/30", "2.00"],
+ ["2017/05/01~2017/05/07", "2.00"],
+ ["2017/05/08~2017/05/14", "2.00"],
+ ["2017/05/15~2017/05/21", "2.00"],
+ ["2017/05/22~2017/05/28", "2.00"],
+ ["2017/05/29~2017/06/04", "2.00"],
+ ["2017/06/05~2017/06/11", "2.00"],
+ ["2017/06/12~2017/06/18", "2.00"],
+ ["2017/06/19~2017/06/25", "2.00"],
+ ["2017/06/26~2017/07/02", "2.00"],
+ ["2017/07/03~2017/07/09", "2.00"],
+ ["2017/07/10~2017/07/16", "2.00"],
+ ["2017/07/17~2017/07/23", "2.00"],
+ ["2017/07/24~2017/07/30", "2.00"],
+ ["2017/07/31~2017/08/06", "2.00"],
+ ["2017/08/07~2017/08/13", "2.00"],
+ ["2017/08/14~2017/08/20", "2.00"],
+ ["2017/08/21~2017/08/27", "2.00"],
+ ["2017/08/28~2017/09/03", "2.00"],
+ ["2017/09/04~2017/09/10", "2.00"],
+ ["2017/09/11~2017/09/17", "2.00"],
+ ["2017/09/18~2017/09/24", "2.00"],
+ ["2017/09/25~2017/10/01", "2.00"],
+ ["2017/10/02~2017/10/08", "2.00"],
+ ["2017/10/09~2017/10/15", "2.00"],
+ ["2017/10/16~2017/10/22", "2.00"],
+ ["2017/10/23~2017/10/29", "2.00"],
+ ["2017/10/30~2017/11/05", "2.00"],
+ ["2017/11/06~2017/11/12", "2.00"],
+ ["2017/11/13~2017/11/19", "2.00"],
+ ["2017/11/20~2017/11/26", "2.00"],
+ ["2017/11/27~2017/12/03", "2.00"],
+ ["2017/12/04~2017/12/10", "2.00"],
+ ["2017/12/11~2017/12/17", "2.00"],
+ ["2017/12/18~2017/12/24", "2.00"],
+ ["2017/12/25~2017/12/31", "2.00"],
+ ["2018/01/01~2018/01/07", "2.00"],
+ ["2018/01/08~2018/01/14", "2.00"],
+ ["2018/01/15~2018/01/21", "2.00"],
+ ["2018/01/22~2018/01/28", "2.00"],
+ ["2018/01/29~2018/02/04", "2.00"],
+ ["2018/02/05~2018/02/11", "2.00"],
+ ["2018/02/12~2018/02/18", "2.00"],
+ ["2018/02/19~2018/02/25", "2.00"],
+ ["2018/02/26~2018/03/04", "2.00"],
+ ["2018/03/05~2018/03/11", "2.00"],
+ ["2018/03/12~2018/03/18", "2.00"],
+ ["2018/03/19~2018/03/25", "2.00"],
+ ["2018/03/26~2018/04/01", "2.00"],
+ ["2018/04/02~2018/04/08", "2.00"],
+ ["2018/04/09~2018/04/15", "2.00"],
+ ["2018/04/16~2018/04/22", "2.00"],
+ ["2018/04/23~2018/04/29", "2.00"],
+ ["2018/04/30~2018/05/06", "2.00"],
+ ["2018/05/07~2018/05/13", "2.00"],
+ ["2018/05/14~2018/05/20", "2.00"],
+ ["2018/05/21~2018/05/27", "2.00"],
+ ["2018/05/28~2018/06/03", "2.00"],
+ ["2018/06/04~2018/06/10", "2.00"],
+ ["2018/06/11~2018/06/17", "2.00"],
+ ["2018/06/18~2018/06/24", "2.00"],
+ ["2018/06/25~2018/07/01", "2.00"],
+ ["2018/07/02~2018/07/08", "2.00"],
+ ["2018/07/09~2018/07/15", "2.00"],
+ ["2018/07/16~2018/07/22", "2.00"],
+ ["2018/07/23~2018/07/29", "2.00"],
+ ["2018/07/30~2018/08/05", "2.00"],
+ ["2018/08/06~2018/08/12", "2.00"],
+ ["2018/08/13~2018/08/19", "2.00"],
+ ["2018/08/20~2018/08/26", "2.00"],
+ ["2018/08/27~2018/09/02", "2.00"],
+ ["2018/09/03~2018/09/09", "2.00"],
+ ["2018/09/10~2018/09/16", "2.00"],
+ ["2018/09/17~2018/09/23", "2.00"],
+ ["2018/09/24~2018/09/30", "2.00"],
+ ["2018/10/01~2018/10/07", "2.00"],
+ ["2018/10/08~2018/10/14", "2.00"],
+ ["2018/10/15~2018/10/21", "2.00"],
+ ["2018/10/22~2018/10/28", "2.00"],
+ ["2018/10/29~2018/11/04", "2.00"],
+ ["2018/11/05~2018/11/11", "2.00"],
+ ["2018/11/12~2018/11/18", "2.00"],
+ ["2018/11/19~2018/11/25", "2.00"],
+ ["2018/11/26~2018/12/02", "2.00"],
+ ["2018/12/03~2018/12/09", "2.00"],
+ ["2018/12/10~2018/12/16", "2.00"],
+ ["2018/12/17~2018/12/23", "3.00"],
+ ["2018/12/24~2018/12/30", "3.00"],
+ ["2018/12/31~2019/01/06", "3.00"],
+ ["2019/01/07~2019/01/13", "3.00"],
+ ["2019/01/14~2019/01/20", "3.00"],
+ ["2019/01/21~2019/01/27", "2.00"],
+ ["2019/01/28~2019/02/03", "2.00"],
+ ["2019/02/04~2019/02/10", "2.00"],
+ ["2019/02/11~2019/02/17", "2.00"],
+ ["2019/02/18~2019/02/24", "2.00"],
+ ["2019/02/25~2019/03/03", "3.00"],
+ ["2019/03/04~2019/03/10", "3.00"],
+ ["2019/03/11~2019/03/17", "3.00"],
+ ["2019/03/18~2019/03/24", "3.00"],
+ ["2019/03/25~2019/03/31", "3.00"],
+ ["2019/04/01~2019/04/07", "3.00"],
+ ["2019/04/08~2019/04/14", "2.00"],
+ ["2019/04/15~2019/04/21", "2.00"],
+ ["2019/04/22~2019/04/28", "3.00"],
+ ["2019/04/29~2019/05/05", "3.00"],
+ ["2019/05/06~2019/05/12", "3.00"],
+ ["2019/05/13~2019/05/19", "3.00"],
+ ["2019/05/20~2019/05/26", "3.00"],
+ ["2019/05/27~2019/06/02", "2.00"],
+ ["2019/06/03~2019/06/09", "2.00"],
+ ["2019/06/10~2019/06/16", "2.00"],
+ ["2019/06/17~2019/06/23", "2.00"],
+ ["2019/06/24~2019/06/30", "2.00"],
+ ["2019/07/01~2019/07/07", "2.00"],
+ ["2019/07/08~2019/07/14", "3.00"],
+ ["2019/07/15~2019/07/21", "3.00"],
+ ["2019/07/22~2019/07/28", "3.00"],
+ ["2019/07/29~2019/08/04", "3.00"],
+ ["2019/08/05~2019/08/11", "3.00"],
+ ["2019/08/12~2019/08/18", "2.00"],
+ ["2019/08/19~2019/08/25", "3.00"],
+ ["2019/08/26~2019/09/01", "3.00"],
+ ["2019/09/02~2019/09/08", "3.00"],
+ ["2019/09/09~2019/09/15", "3.00"],
+ ["2019/09/16~2019/09/22", "3.00"],
+ ["2019/09/23~2019/09/29", "2.00"],
+ ["2019/09/30~2019/10/06", "2.00"],
+ ["2019/10/07~2019/10/13", "2.00"],
+ ["2019/10/14~2019/10/20", "3.00"]
+ ],
+ "showSymbol": false
+ }],
+ "yAxis": {
+ "name": "亿",
+ "scale": true,
+ "axisLabel": {
+ "margin": -10,
+ "verticalAlign": "bottom"
+ },
+ "axisTick": {
+ "show": false
+ },
+ "offset": -5
+ },
+ "tooltip": {
+ "trigger": "axis",
+ "extraCssText": "z-index: 2147483647;"
+ },
+ "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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org