Iris Alpha Slider not aligning properly (in Firefox)

[maddisondesigns]

Hi,

First up, thanks heaps for your work on adding alpha color to this WP Color Picker 🙏

An issue that has just started happening in the last week is that the Alpha Color Slider is no longer sitting properly within the control.

My Customizer controls were displaying fine last week and I haven't made any code changes in that time, but I have updated Firefox (macOS) to the latest version (79.0), so I think it's related to that. The control displays fine in Chrome and Safari.

I'm actually wondering if it's partly a Firefox bug. The .iris-alpha-slider element width appears to be rounding to 17.6333px wide even though the element is only set to 17.625px. When I view it in Chrome, the element width is rounded to 17.63 as expected.

If I manually override the width of that Alpha slider in my Customizer css using the following style, the alpha slider goes back to displaying correctly.

.iris-picker-inner .iris-alpha-slider {
    width: 17.6px !important;
}

Using the above css, the alpha slider displays as expected:

[neilgee]

Yes - also seeing this in Firefox 79 & Firefox Developer 80

[webaware]

I reckon this is likely a Firefox bug. Here's a quick workaround for the script itself.

On line 378, change this:

stripsWidth = ( ( emptyWidth / 2 ) - stripsMargin );

to this:

stripsWidth = ( ( emptyWidth / 2 ) - stripsMargin ) - 1;

Yes, it's a dirty hack, but it works :)

[kallookoo]

Hi, Try the branch 3.0.0 and comment please.

[kallookoo]

Resolved.