• Content Count

  • Joined

  • Last visited

  1. seagull

    Mobile Blur

    Is there any information on canvas/webGL size causing issues on mobile/ios? I think this is the issue, but also am wondering if it has something to to with PIXI. What's happening is if my canvas gets too large, or if I have too many photo sprites, the images and shapes blur, or fail completely. Debug mode: CodePen: If you ramp up `const containerHeight = 1600; ` to something higher, like 3000, the images blur further down the page. On a similar note, if you ramp up `imgNum` to 9, it fails on mobile osx. Can anyone think of any ways that I can work around this?
  2. I'm having trouble replicating this, but on some machines (OS X), in Firefox (latest), the mouseover interaction (see codepen) is causing the stage (the image grid) to jump a few pixels. Any insights as to why this is happening? Should I not be handling filters in the manner that I am? For reference the Filter Animation Code starts on line 147. What I'm doing, in short, is on mouseover reposition filter sprite to current mouse position, then I'm animating by changing the scale value of the filter and the sprite. Any idea what could be causing this jump? const tl = new TimelineMax() tl .set(filter.scale, { x: 0, y: 0 }) .add('sync') .fromTo(ripple.scale, 1,{ x: .1, y: .1 }, { x: .74, y: .74 }, 'sync') .fromTo(filter.scale, 1, { x: 50, y: 50 },{ x: 0, y: 0 }, 'sync')
  3. @ivan.popelyshev You are a hero! Thank you so much!
  4. I'm working on a website, that has images that will use displacement filters for some interactivity. As soon as I add them to my container, the images get blurry, even though I've got the filters scaled to 0. I'm on a MacBook Pro (Retina). Here's a CodePen of the issue: commenting out line 79 will show the higher resolution images. Any thoughts on this? Am I missing something?