test/ios13-z-bug.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>