vue.js css过滤器值不再立即应用在safari但是chrome

zd287kbt 于 2023-01-31 发布在 Vue.js

关注(0)|答案(1)|浏览(129)

当拖动输入范围时，亮度值（也是css属性）正在更新，但在safari中图像不会立即生效。（但在chrome中效果很好）
如何更新拖动时应用更改？

var app = Vue.createApp({
   data() {
   return {
    brightness: 1
    }
  },
  computed:{
    imgStyle(){
        return {
        '-webkit-filter': `brightness(${this.brightness})` 
      }
  }
  }
});

var vm = app.mount("#app"); 


<div id="app">
      <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?" width="150"
      :style="imgStyle">
      
   <input type="range" min="0" max="2" step="0.1" v-model="brightness"/>
      <span>  {{brightness}}  </span>
 </div>

https://jsfiddle.net/akin/b8ey1twp/16/

vue.js

来源：https://stackoverflow.com/questions/75259622/css-filter-value-does-not-apply-instantly-in-safari-but-chrome

1条答案

按热度按时间

db2dz4w81#

This answers有一个"自动"修复Safari中这种奇怪行为的黑客。
你必须添加一个translate3d(0)或translateZ(0)类，强制你的浏览器对这个元素进行use GPU to recalculate changes处理，然后对它们做出React，这似乎克服了Safari上的这个问题，而不会对你的UI产生任何视觉上的差异。

var app = Vue.createApp({
  data() {
    return {
      brightness: 1
    }
  },
  computed: {
    imgStyle() {
      return {
        '-webkit-filter': `brightness(${this.brightness})`
      }
    }
  }
});

var vm = app.mount("#app");

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
  .cat-img {
    transform: translateZ(0);
    ;
  }
</style>
<div id="app">
  <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?" width="150" :style="imgStyle" class="cat-img">

  <input type="range" min="0" max="2" step="0.1" v-model="brightness" />
  <span>  {{brightness}}  </span>
</div>

赞(0）回复(0）举报 2023-01-31

我来回答

vue.js css过滤器值不再立即应用在safari但是chrome

1条答案

相关问题

热门标签

最新问答