[Vuejs]-Css filter value does not apply instantly in safari but chrome

by

1👍

This answers had a hack that "automagically" fixed this weird behaviour from Safari.

You have to add a class with translate3d(0) or translateZ(0) which forces your browser to use GPU to recalculate changes made to this element and then reacts on them, this seems to overcome this issue on Safari without making any visual difference to your 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>
👤Fcmam5

Leave a comment