直击微信X5内核浏览器不支持-webkit-filter的痛点

2024-01-01 04:23:17

前言

在制作7月份市民卡微信超值抢的活动中，偶遇微信浏览器跟PC端的WebKit浏览器的一个区别，由于这次的实现方案跟5月份的有些区别，所以才暴露了这个问题。页面结构布局如图：

<div class="mask"></div>
<div class="box"></div>

DOM结构

页面的DOM结构非常简单，由一个.mask元素和一个.box元素组成。.mask元素是一个半透明的覆盖层，用于遮罩住.box元素。.box元素是一个白色的矩形，位于.mask元素的中间。

CSS样式

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: white;
}

问题现象

在PC端WebKit浏览器中，当鼠标悬停在.box元素上时，.box元素会应用-webkit-filter: blur(5px)滤镜效果，使其变得模糊。而在微信X5内核浏览器中，当鼠标悬停在.box元素上时，.box元素不会应用滤镜效果，仍然保持清晰。

原因分析

经过一番调查，我发现微信X5内核浏览器不支持-webkit-filter滤镜效果。这是因为微信X5内核浏览器使用的是自研的渲染引擎，该渲染引擎与WebKit渲染引擎存在差异。在WebKit渲染引擎中，-webkit-filter滤镜效果是通过GPU加速实现的，而在微信X5内核浏览器中，-webkit-filter滤镜效果是通过CPU实现的。由于CPU的处理能力不如GPU，因此在微信X5内核浏览器中，-webkit-filter滤镜效果的性能较差，可能会导致页面卡顿。

解决方案

为了解决微信X5内核浏览器不支持-webkit-filter滤镜效果的问题，我们可以使用以下解决方案：

使用其他滤镜效果。微信X5内核浏览器支持filter滤镜效果，我们可以使用filter滤镜效果来代替-webkit-filter滤镜效果。
使用JavaScript实现滤镜效果。我们可以使用JavaScript来实现滤镜效果，这样可以兼容所有浏览器。
使用图片来模拟滤镜效果。我们可以使用图片来模拟滤镜效果，这样可以兼容所有浏览器，但这种方法可能会导致页面加载速度变慢。

影响分析

微信X5内核浏览器不支持-webkit-filter滤镜效果可能会对前端开发和网页制作产生一定的影响。首先，前端开发者在开发网页时需要考虑微信X5内核浏览器不支持-webkit-filter滤镜效果的问题，避免使用-webkit-filter滤镜效果。其次，网页制作人员在制作网页时也需要考虑微信X5内核浏览器不支持-webkit-filter滤镜效果的问题，避免使用-webkit-filter滤镜效果。