CODEWITHSUNDEEP
cssvue.jsinputfilterrange
Akin Zeman
Akin Zeman

Reputation: 507

css filter value does not apply instantly in safari but chrome

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/

Upvotes: 0

Views: 338

Answers (1)

Fcmam5
Fcmam5

Reputation: 6822

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>

Upvotes: 1

Related Questions