search

coddicat / vue-pinch-scroll-zoom

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
MIT License
61 stars 15 forks source link

Blurry on iPhone WebKit browsers #41

Open JohnMica opened 1 month ago

JohnMica commented 1 month ago

There seems to be a bug with webkit that triggers the blurry whenever a transform is applied https://bugs.webkit.org/show_bug.cgi?id=27684

however there seems to be a possible fix by using 

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

not sure how this would be implemented yet but i will take a look at this if you want

JohnMica commented 1 month ago 
  const translate = props.translate3d
    ? `translate3d(${x}, ${y}, 0) scale(${state.currentScale})`
    : `translate(${x}, ${y}) scale(${state.currentScale})`;

could perhaps become

  const translate =  `matrix(scale(${state.currentScale}, 0,0, scale(${state.currentScale}, ${x}, ${y}) )`;