Pickr scroll bug (2)
by Simonwep
HTML
<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/monolith.min.css">
<script src="https://simonwep.github.io/pickr/dist/pickr.es5.min.js"></script>
<p>
Scroll down until you see the square, then click it.<br>
The pickr popup shows in a very odd place (scroll to find it).<br>
With the pickr still open, scroll the page once more.<br>
You'll see the pick element moves around unpredictably, even moving faster than the user scrolls the page!
</p>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<div id="color-pickr"></div>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
CSS
#color-pickr {
width: 20px;
height: 20px;
border: 1px solid #000;
}
JavaScript
const pickr = Pickr.create({
el: document.getElementById('color-pickr'),
theme: 'monolith',
defaultRepresentation: 'HEX',
swatches: ['#000', '#fff'],
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
input: true,
clear: true,
save: true
}
}
});