View组件用:style动态设置webkit系列样式无效

[byhaozi]

相关平台

微信小程序

复现仓库

https://gitee.com/byhz/taro-issue-debug.git
小程序基础库: 2.16.1
使用框架: Vue 2

复现步骤

1. 重现项目中包含一个test页面（也只有这个页面），项目clone下来
2. 执行yarn dev:h5 会发现h5的页面中，webkitMaskimage样式正常，显示一个被圆形遮罩的图片
3. 执行yarn dev:weapp 调试微信小程序，用微信开发者工具打开相同页面后，会发现webkitMaskimage是无效的。
4. 将maskImage直接写在<style>里，样式都会生效。但是业务的需求上，webkitMaskimage一定要动态赋值（接收不同的遮罩来展示图片），也就是使用:style来动态赋值样式。
5. 推测是taro在解析这个style的时候把webkitMaskImage过滤掉了。

期望结果

h5和微信小程序两端webkitMaskImage均能生效

实际结果

微信小程序端的webkitMaskImage未生效

环境信息

👽 Taro v3.2.1


  Taro CLI 3.2.1 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.7.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.1.0 => 3.1.0 
      @tarojs/mini-runner: 3.1.0 => 3.1.0 
      @tarojs/runtime: 3.1.0 => 3.1.0 
      @tarojs/taro: 3.1.0 => 3.1.0 
      @tarojs/webpack-runner: 3.1.0 => 3.1.0 
      babel-preset-taro: 3.1.0 => 3.1.0 
      eslint-config-taro: 3.1.0 => 3.1.0 

---

补充信息

在往前的issus里有一条类似关于webkit的样式无法赋值的帖【https://github.com/NervJS/taro/issues/8109】。但是并未看到有效回复。评论中有一条解决方案【https://taro-docs.jd.com/taro/docs/size/#%E5%BF%BD%E7%95%A5%E6%A0%B7%E5%BC%8F%E6%96%87%E4%BB%B6】，也仅仅只能作用于静态的样式。而不适用于要动态赋值的情况。产品上线在即，但是这个问题影响不小。很多页面需要通过webview来展示h5页面来规避这个bug。有违taro设计的初衷。望大大们能解决，十分感谢，敬礼。

[Jkanon]

目前可以用'-webkit-mask-image'替代webkitMaskImage

[byhaozi]

目前可以用'-webkit-mask-image'替代webkitMaskImage

非常严谨的试了一下“-webkit-mask-image”代替webkitMaskImage，至少在我这个复现案例里也是不行的。感谢您的留言

[Jkanon]

目前可以用'-webkit-mask-image'替代webkitMaskImage

非常严谨的试了一下“-webkit-mask-image”代替webkitMaskImage，至少在我这个复现案例里也是不行的。感谢您的留言

好吧，我这么用是可以的

[byhaozi]

目前可以用'-webkit-mask-image'替代webkitMaskImage

非常严谨的试了一下“-webkit-mask-image”代替webkitMaskImage，至少在我这个复现案例里也是不行的。感谢您的留言

好吧，我这么用是可以的

大神您好，非常感谢您的回复，可否麻烦贴一下您的相关代码片段，我看下是否还有别的环节我疏漏了，导致其无法生效，太感谢了

[Jkanon]

目前可以用'-webkit-mask-image'替代webkitMaskImage

非常严谨的试了一下“-webkit-mask-image”代替webkitMaskImage，至少在我这个复现案例里也是不行的。感谢您的留言

好吧，我这么用是可以的

大神您好，非常感谢您的回复，可否麻烦贴一下您的相关代码片段，我看下是否还有别的环节我疏漏了，导致其无法生效，太感谢了

看了下你的问题和我之前遇到的还有点不同，小程序端的直接用maskImage属性应该就可以了

[thiszhong]

Taro 3.3.2，Vue3，style object -> style string，用字符串的 style 可以暂时解决 webkit 问题。
然后猜测用 render、jsx 可能也可以解决。

style =  `width:${size};
            height:${size};
            -webkit-mask-image:url(${props.icon});
            -webkit-mask-size:contain;mask-size:contain;
            background:${color};
          `

[byhaozi]

您好 &nbsp; &nbsp; 非常感谢您给予的回复。这里将issue中上传的demo更新到了3.3.2，并使用字符串style赋值，仍然无法在小程序环境中绑上相关的webkit样式，唯一与您提到的不同的是我们使用的还是Vue2，因为当下的业务环境而言，一时间无法将Vue2升级至Vue3。请问Vue2可以支持吗？非常感谢，期待您的回复！

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "NervJS/taro" ***@***.***&gt;; 发送时间:&nbsp;2021年8月10日(星期二) 晚上6:44 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [NervJS/taro] View组件用:style动态设置webkit系列样式无效 (#9198) Taro 3.3.2，Vue3，style object -&gt; style string，用字符串的 style 可以暂时解决 webkit 问题。 然后猜测用 render、jsx 可能也可以解决。 style = `width:${size}; height:${size}; -webkit-mask-image:url(${props.icon}); -webkit-mask-size:contain;mask-size:contain; background:${color}; ` — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[thiszhong]

试了下 Vue2 没有成功，那就没法了

[itsdapi]

taro 3.6 react
仍然有这个问题
用字符串可以解决

  private style = {
    maskImage: 'url(' + this.props.src + ')',
    '-webkit-mask-image' : 'url(' + this.props.src + ')',
    background: this.props.color,
    height: this.props.size,
    width: this.props.size
  }