Color picker cursor not accurate

The color picker cursor seems to not accurately represent the color that I have selected. Please see the following screen cast to understand the problem that I’m having:

Thanks

Hello There,

Where is that page exactly? I have tested it on Theme Options > Buttons color picker, and also on a Test draft page and it seems the accurate as I see it: https://screencast-o-matic.com/watch/cqeIiP0afR. Yes, I can see the difference on your screencast, but when I do it on your site, I can’t duplicate it. You may delete the test draft page.

I tried it with a button on your test page and I do not experience the issue. I experience the issue however specifically within the theme options (was using the button default color pickers to test) on two different browsers, and on 2 different Pro sites.

Hi @threeoten,

I checked the buttons in Theme Options and the color is changing okay, and directly applied to the buttons in preview. Perhaps the preview is just slow on your end affected by internet speed? Because there are times it’s slow on my end but the color changes okay after a couple of waits, and sometimes it’s instant.

And please provide your screencast again with mp4 format, I can’t play it since it requires flash player in which I can’t install on my machine due to security reason.

Thanks!

Speed isn’t the problem at all, it’s that the color picker jumps to a different color. You need to see the screen cast to understand.

Sorry, but I’ve been using this for screen capture in these forums for years and no one has not been able to play them. Perhaps forward it onto another person on your team?

Hello There,

We are sorry you are still having this issue. I am sure on my previous check I cannot see the issue on Theme Options > Button colors. Now I have check again on that and weird yes, it is different specially on initial opening of color picker.
Since you do have latest worpdress, please update Pro theme as well. Note to always save a backup before doing an update. Clear cache after and check again. Checked it my 2 installation and I can’t duplicate the same issue though.

I experience the same thing on a different site, everything is updated to the latest versions.

Hi @threeoten,

Sorry for the confusion, I was just asking to see if it’s just slow on your end and not really saying it’s the case. ANd it’s because it has random or changing performance when I tested it. Still, I wouldn’t install flash player just to play the FLV videos for security purposes.

And @Lely was able to provide a video confirming the issue on her end, but again, it’s random on my end and usually happens on the first one (not on hover color options).

Then I just found out that there is 500 error appearing once I deactivated the cache and preloader plugin.

For this, please provide your FTP login credentials as well so I could continue checking. I can’t promise any solution if this is caused by other features and plugins outside the theme and builder. And while I’m on that, please deactivate or pause your CloudFlare as well. And please provide your CloudFlare’s login credential as well in case I need to purge it, having multiple optimizations is overkill (cache plugins combined with CF, and other optimization).

I please allow me to deactivate all plugins and features. But if you’re not comfortable with that, then I recommend creating a staging of your site and please check this for that https://theme.co/apex/forum/t/slider-revolution-error-message/48874. Again, this request is so we could continue checking without harming your live site, and I will prefer a more secured of doing that.

Thanks!

Please just use the site and credentials in my previous reply, that site has less plugins, is newer, and is not on CloudFlare. I have the issue there as well in the Theme Options > Buttons.

Hi @threeoten,

It seems the caching issue. I’ve purged all the cache of W3 Total Cache then deactivated this plugin, the button color is working fine now:

Cheers!

Please see this screen cast for more clarity. Also, I ONLY experience this in Theme Options… not the content or header builder. 2 different sites, 2 different browsers, all plugins deactivated, no cloudflare, etc.

Hi @threeoten,

The second site has no ClouldFlare and I couldn’t replicate the issue there. The cursor is correctly pointing to the saved color.

What I like to troubleshoot is your first site that has CloudFlare. Please allow me to disable all the plugins and please provide your CloudFlare’s login credentials, or disable it.

Thanks!

It seems that it doesn’t have the problem on a white color. Try the other button colors.

Can we troubleshoot the other site (cvfrc) since it isn’t a live site yet and has less variables to factor in?

Also… I tested it on a 3rd site of mine, and same problem exists.

Hi @threeoten,

Are they on same host environment? What I’m getting is random, I checked the CVFRC and I’m only able to reproduce it once but not anymore. This is after saving and reloading

And this is a video from my end https://www.dropbox.com/s/uotzb69evifujtp/bandicam%202019-03-17%2008-15-21-433.mp4?dl=0

Which is why I have to check the first site without any optimization and CloudFlare.

Thanks!

2 out of the 3 sites are on DreamHost. 1 is on BlueHost.

Yes it only does this on the VERY FIRST change of the color picker. Then after that it is fine. And again, it doesn’t have the problem when the color is up in the corner, maxed out like white.

Here you can see, the blue color that is set should not be located at the TOP of the color picker because you can see that it is just not bright enough… the cursor SHOULD be down farther if it were displaying the accurate color. All 3 blue colors show a cursor on the picker that is at the top… they are more dark blues and should be lower, thus on a fresh page load it is displaying inaccurate colors.

Please, if you can, try not to save the options after changing the colors.

Thanks

Hey @threeoten,

I think I have predictably replicated the issue both the version you’re currently using now (Pro 2.4.6) and the latest version (Pro 2.5.4). I’ve broken it down so to aid us when further investigating the issue.

The issue

  • Color picker position does not reflect the saved position after reload.

  • The issue described above results to clicking near the position after reload results to a lighter color.

This is maybe because the position is wrong in the first place and what you’re actually clicking is a color above the saved position. This is why when you click way below the saved position which is darker, the color picker is perceived to be or actually is working.

In the list below, I’ll add my own findings in my test site and confirm what Lely discovered. The issue happens:

  • only after the initial opening of the color picker
  • in the Theme Options only
  • on each color picker option
  • when you click near the current position only
  • seems to be affecting 0 to 80% saturation only. If the saturation is near 100%, the issue does not happen.

I’ll post this in our issue tracker for further investigation. For now, if you wish to change the color, please ignore the position and actually look and click on the color in the color picker.

Alternatively, you can use a third party color picker like https://htmlcolorcodes.com/color-picker/. Then, copy the HEX color value to the color picker field.

Regretfully, the same issue happens or the position is wrong when you paste a value.

Here’s the actual position in the third party color picker.

Hope that helps.

Thanks for getting down to the bottom of it. I will also add that it doesn’t seem to affect the lower saturation, such as white.

I’ll navigate around the issue, it was just annoying when trying to set the button colors and so I wanted to let you all know of the issue if it is a bug.

Thanks

Hi @threeoten,

Noted and thanks for letting us know.

Have a great day! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.