echarts tooltip is covered by canvas on iOS13

[collingmk]

Version

4.3.0

Steps to reproduce

option ={
                        grid:{
                            top:'20%',
                            bottom:0,
                            right:'5%',
                            left:'0',
                            containLabel:true,
                        },
                        tooltip: {
                            trigger: 'axis',
                            confine:true,
                        },
                        xAxis: {
                            type: 'category',
                        },
                        yAxis:{
                            name:'元/吨',
                            min:'dataMin',
                        },
                        dataset:{
                            dimensions:['日期','采购价'],
                            source:[
                                {'日期':'2019-01-02','采购价':100},
                                {'日期':'2019-01-05','采购价':400}
                            ]
                        },
                        series: {
                            type:'line',
                            smooth:true,
                            symbol: 'circle',
                            symbolSize:2,
                            sampling: 'average',
                            connectNulls:true,
                            label:{
                              // show:true
                            },
                            itemStyle: {
                                color: '#ffc858'
                            },
                            lineStyle:{
                                width:1
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#ffc858'},
                                        {offset: 1, color: 'rgba(255,200,88,0)'}
                                    ]
                                )
                            }
                        },
                    }

What is expected?

tooltip正常提示

What is actually happening?

tooltip被图形容器遮盖

[collingmk]

目前仅有iphone11 出现此问题

[collingmk]

多个chart同时出现在一张页面上 会出现此问题

[Ovilia]

这个是网页直接在移动端跑，还是在小程序之类的环境中？
可以试试 https://echarts.apache.org/zh/option.html#tooltip.renderMode 设为 'richText'.

[yangguansen]

我在IOS 13上也遇到了这个问题，tooltip弹出无法覆盖图表，反而被图表覆盖了。IOS < 13是正常的。
Echarts 版本： 4
客户端： ionic 混合APP
手机：iphone X
手机系统版本：IOS 13

[Ovilia]

@yangguansen 试一下我上面的方法？

[yangguansen]

加上这个后，确实可以了，感谢。

[yangguansen]

@Ovilia 再请教一下：目前已有几十个图表, 如何统一修改全局配置，来让实例们继承这个属性呢？

[Ovilia]

两个方法，一个是使用 ECharts 的主题 echarts.registerTheme，这个方法的参数 theme 就是配置项 option，试试可不可以用，有点不确定。
另一种方法是，自己写一个合并默认配置项（包含这个 renderMode 的设置）与每个图表的配置项的方法，返回值是这两个配置项 merge 后的对象。

[Twinkle999]

@Ovilia 如果我的tooltip里面使用了formatter，返回了html的字符串，是不是就不能用renderMode等于richText这种方式？那怎么才能让自定义tooltip在ios13不会被覆盖？

[Cqy1995]

@Ovilia 我的tooltip在ios13上使用了formatter,需要返回html字符串，使用rederMode参数为richText是不可以的，所以我在extraCssText,上面设置了z-index,想问一下是否还有其他好的办法？？

[yangguansen]

@Ovilia 请问一下：
1.这个问题未来是否会修复？
2.修改源码中的renderMode的默认值，是否可以一次性解决所有实例问题？

[yangguansen]

@Ovilia 如果设置了richText, 发现自定义tooltip的marker无法显示出来，请问有解决方法吗？

[yangguansen]

@Cqy1995 请问extraCssText可以解决IOS13上被遮住的问题吗？

[Cqy1995]

添加样式是可以的，但是层级的话还是不可以！

…

------------------ 原始邮件 ------------------ 发件人: sanmu <[email protected]&gt; 发送时间: 2019年10月21日 19:27 收件人: apache/incubator-echarts <[email protected]&gt; 抄送: Cqy1995 <[email protected]&gt;, Mention <[email protected]&gt; 主题: 回复：[apache/incubator-echarts] echarts 移动端 toolTip被echarts容器遮盖（iphone11手机） (#11383)

[Ovilia]

@Ovilia 我的tooltip在ios13上使用了formatter,需要返回html字符串，使用rederMode参数为richText是不可以的，所以我在extraCssText,上面设置了z-index,想问一下是否还有其他好的办法？？

@Cqy1995 这个问题是由于 ECharts 现在 tooltip 的 z-index 不够高引起的吗？修改 extraCssText 是正确的做法，如果是这个原因，我们也可以把默认值设大一点。

[Ovilia]

@Ovilia 请问一下：
1.这个问题未来是否会修复？
2.修改源码中的renderMode的默认值，是否可以一次性解决所有实例问题？

1. 如果明确是 tooltip z-index 太低引起的话，是比较好修复的，会在 ECharts 修复
2. 不能把默认值改完 richText，因为 richText 本质是在 Canvas 绘制内容，可能会有一些局限性，比如无法支持 html 格式的 formatter

[yangguansen]

@Ovilia tooltip的dom是和canvas父级平层，所以我觉得不应该是canvas z-index的问题。

[snail1]

想问一下这个问题解决了么

[snail1]

想问一下这个问题解决了么

[lschenn]

请问这个问题解决了吗？我们研发组也遇到同样的问题。
设备环境：Android8.0.0
问题：滑动tooltip显示在折线图层下方（已排除z-index的问题）
（renderMode设置无效，因为formatter是拼接成的HTML） @Ovilia

[xuchaozhang]

@Ovilia 请问这个问题解决了么 如果使用richText 图形点击事件会失效 extraCssText设置z-index 也是没有用的

[Ovilia]

我们会尽快解决这个问题

[pissang]

看起来是 safari 13 的 bug，我们在 ecomfe/zrender#522 中绕过了这个 bug，这个版本下周末左右发布

[weili199402]

      position: function(point, params, dom, rect, size) {
        dom.style.transform = "translateZ(0)";
      }

这样可以解决！

[luyanchen]

看起来是 safari 13 的 bug，我们在 ecomfe/zrender#522 中绕过了这个 bug，这个版本下周末左右发布

我们今天发现这个问题，等不到你们发布新包了。自己在项目中怎么改呢？

[pissang]

@luyanchen 用 !important 强制覆盖 echarts 容器中的样式，去掉 overflow

[qinghechaoge]

看起来是 safari 13 的 bug，我们在 ecomfe/zrender#522 中绕过了这个 bug，这个版本下周末左右发布

发布了吗？升级echarts能解决问题吗？

[qq79952008]

给tooltip的div添加css属性transform: translateZ(0);可以解决

[Samerkassem]

Hello, I am having the same issue but I don't know Chinese, can anyone translate the solution?

[yangguansen]

Hello, I am having the same issue but I don't know Chinese, can anyone translate the solution?

This problem had resolved in latest version. You can try to download the latest version.
If you want to see detail about the code of the problem. Check this ecomfe/zrender#522