Closed alanoakden closed 3 years ago
Hi @alanoakden,
thanks for the heads up! Alas, this might be a hard one to tackle & is probably connected to #122. Gonna try looking into it as soon as I can, nevertheless.
Best,
Tim.
Hi there! As @timhagn momentarily is the main contributor to this package, this issue has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs, though we're open to suggestions on how to get more maintainers! Thank you for your contributions : )!
Hi @alanoakden,
thanks for the heads up! Alas, this might be a hard one to tackle & is probably connected to #122. Gonna try looking into it as soon as I can, nevertheless.
Best,
Tim.
Cool no worries, just to note implementing an alternative design of the component using standard gatsby image removed the error.
Hi @alanoakden!
Well then for your use case it seems "solved", but for others it isn't ; ). I'm closing this in favor of #148, as it's duplicating this one.
Best,
Tim.
Summary
On certain devices (especially those that seem to load slowly) between the image initially rendering in low quality and blurred, and the image fully loading in high quality, there is a flash of the background colour.
I can mainly repeat this when I test mobile devices on browserstack, perhaps because they load slower.
Relevant information
Here is a video https://drive.google.com/file/d/1zX6WtxgRlb5V0T4q6vsghY8yQMk8yOCG/view?usp=sharing , you have to wait a bit for the page to load, but when it does, notice how the image is partially loaded, then black is shown (the colour set for this backgroundImage component), and then the image returns in full quality. On my own devices this doesn't really happen, but other users have mentioned it and indeed I see this in browserstack. Video in question is on an iPhone 6s running safari 12
Environment (if relevant)