I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs).
On my website, I have a large canvas for three.js graphics, and I suspect this may be related to the problem. However, even after removing the canvas, the offset issue persists.
I have tried placing the color picker in various parts of the HTML code within different containers, but the offset remains no matter what I do.
Here is a snippet of my HTML code:
<body>
<div id="container">
<div class="sidebar" id="sidebar">
<div class="controls" id="controls">
<div>
<h4 class="sect-head">BACKGROUND</h4>
<div class="sect-child">
Sky Color
<input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">
</div>
</div>
</div>
</div>
</div>
</body>
Below is the CSS code for my jscolor settings:
.jscolor {
width: 60px;
height: 13px;
border: white;
font-family: "umma";
font-size: 10px;
}
While everything else on my webpage functions correctly, the graphics issue with the color picker persists. How can I resolve this?