css filter value does not apply instantly in safari but chrome

Question

while dragging input range, brightness value (also css property) is updating but image is not effected instantly in safari. (but in chrome it works well)

how to update changes apply while dragging?

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/

Answer 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>