search

kennethcachia / background-check

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
http://kennethcachia.com/background-check/
MIT License
3.27k stars 282 forks source link

Janky Colour Swapping #114

Closed sabotawsh closed 4 years ago

sabotawsh commented 5 years ago

Hello!

I have the plugin working, but it's not consistent between images. Sometimes it works and sometimes it doesn't. There aren't any dev errors so I'm struggling to correct this.

Any idea?

XavierF commented 4 years ago

Was having the same issue too and was driving me crazy but this was happening on page load with the same image. I went and set debug: true and reloaded the page and found this:

Screen Shot 2019-10-28 at 6 03 04 PM

reading the documentation background check stops working or kills the process after 500 ms... which is it's default setting. In the js I added maxDuration: 1000 seems to work fine now

Edit: It's also mindful to keep img file sizes as small as possible for faster loading. The issue on my end is I'm using a background img in a hero div on a dev server so I will be reducing image file sizes to improve performance before I go live.

sabotawsh commented 4 years ago

I ended up killing this styling because I couldn't sort it out at the time and it looked too janky. Thanks for sharing. Will bookmark for the future!

Re: Image sizes, 100%