iOS16下-webkit-backdrop-filter忽略border-radius的解决方法

问题现象 #

在iPhone13（iOS16）设备上将HTML转为图片时，使用-webkit-backdrop-filter属性会导致父元素的border-radius失效：电脑端显示正常（带圆角），但移动端无圆角效果。移除-webkit-backdrop-filter可恢复圆角，但会丢失模糊效果，需要同时保留模糊与圆角效果。

修复方案 #

iOS16的WebKit内核存在已知问题：当元素应用-webkit-backdrop-filter时，会忽略父元素的overflow: hidden和border-radius限制。可通过以下方式快速修复：

• 给应用-webkit-backdrop-filter的元素设置与父容器一致的border-radius
• 添加-webkit-mask-image属性强制WebKit识别圆角遮罩

修改后的代码 #

var styleTag = document.createElement("style");
var cssRules = "h1{\n" + 
                "font-family: Arial,Helvetica,sans-serif;\n" +
               "}\n" +
               ".card-container {\n" +
               "  position: relative;\n" +
               "  width: 300px;\n" +
               "  height: 400px;\n" +
               "  border-radius: 15px;\n" +
               "  overflow: hidden;\n" +
               "  /* 优化渲染稳定性 */\n" +
               "  -webkit-backface-visibility: hidden;\n" +
               "  backface-visibility: hidden;\n" +
               "}\n" +
               ".album-cover {\n" +
               "background-image: url('https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=2');\n"  +
               "  width: 100%;\n" +
               "  height: 100%;\n" +
               "  background-size: cover;\n" +
               "  background-position: center;\n" +
              "}\n" +
               ".blur-overlay {\n" +
               "  position: absolute;\n" +
               "  top: 0;\n" +
               "  left: 0;\n" +
               "  width: 100%;\n" +
               "  height: 100%;\n" +
               "  backdrop-filter: blur(10px);\n" +
               "  -webkit-backdrop-filter: blur(10px);\n"+
               "  /* 关键修复：与父容器保持一致的圆角 */\n" +
               "  border-radius: 15px;\n" +
               "  /* 强制WebKit识别圆角遮罩 */\n" +
               "  -webkit-mask-image: -webkit-radial-gradient(white, black);\n" +
               "}\n" +
               ".lyrics {\n" +
               "  position: absolute;\n" +
               "  top: 50%;\n" +
               "  left: 50%;\n" +
               "  transform: translate(-50%, -50%);\n" +
               "  text-align: center;\n" +
               "  padding: 20px;\n" +
               "  color: white;\n" +
               "}\n" +
               ".song-info {\n" +
               "  position: absolute;\n" +
               "  bottom: 0;\n" +
               "  left: 0;\n" +
               "  width: 100%;\n" +
               "  padding: 10px;\n" +
               "  background-color: rgba(0, 0, 0, 0.6);\n" +
               "  color: white;\n" +
               "  /* 修复底部栏圆角 */\n" +
               "  border-bottom-left-radius: 15px;\n" +
               "  border-bottom-right-radius: 15px;\n" +
               "}\n";
styleTag.innerHTML = cssRules;
document.head.appendChild(styleTag);

// 创建 card-container 和其内部元素
var cardContainer = document.createElement("div");
cardContainer.className = "card-container";

var albumCover = document.createElement("div");
albumCover.className = "album-cover";

var blurOverlay = document.createElement("div");
blurOverlay.className = "blur-overlay";

var lyrics = document.createElement("div");
lyrics.className = "lyrics";
lyrics.innerHTML = "笔记";

var songInfo = document.createElement("div");
songInfo.className = "song-info";
songInfo.innerHTML = "<p>歌曲名称</p><p>作者</p>";

// 将内部元素添加到 cardContainer 中
cardContainer.appendChild(albumCover);
cardContainer.appendChild(blurOverlay);
cardContainer.appendChild(lyrics);
cardContainer.appendChild(songInfo);

// 将 cardContainer 添加到 <body> 标签中
document.body.appendChild(cardContainer);

// 添加<h1>元素到<body>标签中
var h1 = document.createElement("h1");
h1.textContent = "文本";

document.body.appendChild(h1);

// 创建一个<div>元素用于显示截图，并添加到<body>标签中
var screenshotDiv = document.createElement("div");
screenshotDiv.id = "screenshot";
document.body.appendChild(screenshotDiv);

关键修改说明 #

1. 给.blur-overlay添加与父容器一致的border-radius，确保模糊层本身带圆角
2. 添加-webkit-mask-image属性，强制WebKit内核识别圆角遮罩，解决滤镜突破边界的问题
3. 给.song-info添加底部圆角，避免底部栏溢出父容器圆角
4. 给父容器添加-webkit-backface-visibility: hidden，优化iOS端的渲染稳定性

内容的提问来源于stack exchange，提问作者Michael