Images blurred out on Google Pixel 3 about yellowcake HOT 9 CLOSED

I hope to get time to look into this later. For now you can disable lazy images with lazy option/prop with the images component. See https://github.com/thriveweb/yellowcake/blob/master/src/components/Image.js

from yellowcake.

Thanks, so I changed the lazyload value to false and now the images don't load in desktop either, am I changing the right settings?

from yellowcake.

Hello @firthir . I have the same problem on a OnePlus 6. Have you found a better solution than disable the lazy loading ?

Thank you !

from yellowcake.

Thanks for the update. The intersection observer is not working. I don't have access to this device type for the test yet. Could you visit this Codepen and let me know if you're still having the issue.
https://codepen.io/afrith/pen/BaopQgY

from yellowcake.

Thanks, I get a rectangle saying 'observed' for each div. Screenshot attached.

from yellowcake.

Cool, you found a bug. I've updated the repo and here is the code, or you can pull it in :).

    if (background && lazy) {
      style = {
        backgroundImage: `url(${
          this.state.isIntersecting ? fullSrc : smallSrc
        })`,
        backgroundSize
      }
    } else {
      style = {
        backgroundImage: `url(${fullSrc})`,
        backgroundSize
      }
    } 

https://github.com/thriveweb/yellowcake/blob/master/src/components/Image.js

Then add lazy={false} to the image you want.
Example use: https://github.com/thriveweb/yellowcake/blob/master/src/components/PageHeader.js.

if (large) className += ' PageHeader-large'
  return (
    <div className={`PageHeader relative ${className}`}>
      {backgroundImage && (
        <Image
          background
          resolutions="large"
          src={backgroundImage}
          alt={title}
          size="cover"
          lazy={false}
        />
      )}

from yellowcake.

Cool, glad it's been of some use! This might sound daft but I'd like to try and pull it in, bit of a novice with github, is it hard to do?

from yellowcake.

Hey, the images load in incognito using chrome but not in the normal browser page, have cleared the cache etc...

Also, on a different subject is there any documentation about adding another page using specific components?

Thanks,
Joe

from yellowcake.

Gatsby has an application cache. @joebram you can find this in chrome inspect element > Application tab at the top > Cache on the left-hand menu > cache storage.
Delete that and you should be sorted.

from yellowcake.