火狐兼容性问题修复记录

DragonBalls
1,109 阅读3分钟

原先我们的项目对外宣称只支持Chrome，但是最近还需要支持火狐和Edge。由于我们使用的Vue框架，对于这三种现代浏览器一般是没有什么兼容性问题的。但是实测发现，还是有一些问题的，问题主要集中图编排能力部分(使用的是@antv/g6)。

各种坐标的区别

因为项目中涉及到了坐标，趁着这次机会复习了下各种坐标的区别，主要参见MDN。

  • pageX/Y：坐标相对于整个渲染页面的左上角(包括滚动隐藏的部分)
  • clientX/clientY：坐标相对于页面可视部分的左上角(不包括浏览器的地址栏和菜单栏)
  • screenX/screenY: 相对于物理屏幕/显示器的左上角
  • x/y: 实验中的功能， clientX/clientY的别称
  • offsetX/offsetY: 实验中的功能 看Stack Overflow上面回答，有人给出的图一看就会。 image.png

image.png

svg图元未绘制出来(火狐)

svg加上width和height解决

拖拽结束会新增一个tab页面(火狐)

关闭火狐的默认设置

HTML的拖拽onDragStart、onDragEnter、onDragEnd在火狐上遇到的问题【没用到这个】

拖拽结束图元不显示(火狐)

原因：

handleDragEnd函数中得到的e.x和e.y都是0，进一步转化坐标是负数，无效坐标，直接return

深层原因：

应该算是火狐的bug

stackoverflow.com/questions/8…

stackoverflow.com/questions/1…

解决：

大概参考了为什么event.clientX在Firefox的Dragend事件中错误地显示为0？。

当拖拽一个项目到 HTML 元素中时，浏览器默认不会有任何响应。想要让一个元素变成可释放区域，该元素必须设置 ondragover (en-US) 和 ondrop 事件处理程序属性。注意每个处理程序调用 preventDefault() 来阻止对这个事件的其它处理过程（如触点事件或指针事件）。具体参见MDN的HTML 拖放 API

所以两步解决这个问题。一是在目标区域，加上了@drop和@dragover，里面的函数逻辑都是e.preventDefault()；二是在拖拽组件中created生命周期

document.addEventListener('drop', this.dropHandler)，在destroyed的时候document.removeEventListener('drop', this.dropHandler)，

dropHandler中的函数就是记录clientX和clientY

dropHandler: function(e) {
    this.clientX = e.clientX
    this.clientY = e.clientY
}

没有数据的图标样式上移，乱了

11.PNG

22.PNG 火狐里面的td有个高度48px，火狐里面就直接48px了。但是chrome会撑开，高度够用。

滚动条样式问题

Chrome中的样式：

33.PNG

火狐中的样式：

44.PNG

原先设置滚动条样式的代码如下：

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #fff;
}

::-webkit-scrollbar-track-piece {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ddd;
}

webkit是Chrome的前缀，惯性思维，把上面的代码复制一遍，webkit全改成moz，结果发现没用。查了下火狐不支持修改滚动条的样式，想修改也可以，使用CSS Scrollbars，但是这是个实验性的技术，目前只兼容火狐64及以上版本。

所以可以加上scrollbar相关的属性实现对火狐的滚动条样式调整，在上面代码加上类似下面的代码：

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

具体可以参见这篇文章How To Style Scrollbars with CSS。

avatar
文章
阅读
粉丝