Default Color issue

[simonwep]

Default Color issue

[LeFrach]

In my case the problem is due to bootstrap's tab, to solve my problem I put the pickrTab active.
Or I defer instanciation after the click on the tab.

By the way, Thank you very much for this great pickr librairy, I really like it :)

[nickbrit]

I think it's because the picker is not visible and this.wrapper.offsetHeight is 0.
https://github.com/Simonwep/pickr/blob/0c5b5c180cfb79c3760883859445459c2a4d18b6/src/js/pickr.js#L236
It's why background will be linear-gradient(to top, rgba(0, 0, 0, 1), transparent), linear-gradient(to left, hsla(NaN, 100%, 50%, 1), rgba(255, 255, 255, 1)).

[simonwep]

Thanks to @nickbrit, fixed! JSFiddle fork: https://jsfiddle.net/ew9zq0sg/ see f354a34 😃

[simonwep]

Could you please provide information how to reproduce it? Maybe a JSFiddle.

[SkaveRat]

I can confirm this issue, but can't seem to replicate it in JSFiddle

What happens, however, seems to be that .pcr-palette and .pcr-picker don't get their styles set untill a user clicks on the palette. Before that the palette shows a checker pattern.

This also only started happening when updating to 0.3.4 (before I had 0.3.2)

[simonwep]

Which browser (/ version) do you guys use? Seems like a strange bug

[sudheerm589]

We used Chrome browser.

…

On Sun 10 Feb, 2019, 1:56 AM Simon ***@***.*** wrote: Which browser (/ version) do you guys use? Seems like a strange bug — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#59 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/As4Ajl4QHV8n9tMshL_efWH1phyqHedEks5vLy8FgaJpZM4aUGuH> .

[simonwep]

Version? I cannot reproduce it with these little informations... At least the environment, style / script including or packaging tool would be helpful!

[JakeOcean]

I noticed this issue with firefox

[SkaveRat]

Tested with Chrome 69+ and firefox 61+

diff-ing the two versions, I'd guess it has something to do with the introduction of initializing via requestAnimationFrame .
If I had to guess, there is something (maybe in the dependencies people use?) that messes with requestanimationframe.

[JakeOcean]

@SkaveRat

In my case I noticed that I had the default within the 'components' array, and once I moved it above it worked as expected. I cant remember where I copied the original demo code from where the defautl was in the wrong place

[LeFrach]

Hello,
Same problem here (Chromium 66.x)

[simonwep]

Okay, thank you all! I'll try to reproduce / fix it! :)

[simonwep]

I think this is also related to #4 and #31. This comment seems to solve this bug (maybe). I'm not sure in which environment this bug appears... Be sure to load pickr's css before all the javascript. Otherwise things like @LeFrach's screenshot happens. Moreover, don't use the defer attribute.

For example, try to add all of your css in the head element and place your JS at the very bottom of body.

[nickbrit]

I can replicate this issue on Tab 2 https://jsfiddle.net/zbpn59cd/4/.
http://g.recordit.co/L56GZQACV8.gif

Chrome 71/ MacOS

[SkaveRat]

can confirm. not being visible is the cause. In my case it's also not visible on page load.

Just checked, and the pallette works fine when it's visible on page load.

[sudheerm589]

Yes, by debugging I too find out that not visible is the problem

…

On Thu 14 Feb, 2019, 3:02 PM SkaveRat ***@***.*** wrote: can confirm. not being visible is the cause. In my case it's also not visible on page load. Just checked, and the pallette works fine when it's visible on page load. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#59 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/As4Ajq_jdaiVgWcQUuMvT9y63_E0q_Rjks5vNS0QgaJpZM4aUGuH> .

[LeFrach]

Yes problem solved for me, thank you !