selecto-selection element appears as opaque blue

[benwoodward]

Environments

• Framework name: selecto-svelte
• Framework version: 1.15.0
• Component name: Selecto
• SvelteKit version: 1.0.0-next.295

Description

I have two Selecto instances on the page, the one in the timeline works fine:

However, the one that I'm trying to get to work with the text always appears with 100% opacity:

  <Selecto
    dragContainer={'#transcript-paragraph'}
    selectableTargets={['#transcript-word']}
    hitRate={100}
    selectByClick={false}
    selectFromInside={true}
    ratio={0}
    on:selectEnd={handleSelectEnd}
    bind:this={selecto}
    />

(It does appear to select properly)

If I reveal the selecto-selection element while it's not in use:

Then it has the correct appearance!

I've pored through all of the CSS that applies to this element on the ones above, tried disabling other CSS styles and CSS vars and cannot figure it out.

EDIT: So I refreshed the page, and now I'm noticing that this time it seems less than opaque:

If I manually change the opacity of the element's background to 0.1 instead of 0.5 then I get the right opacity:

Very strange. ~~Seems like this is potentially a Chromium bug?~~ Problem confirmed to exist in Safari and Firefox

EDIT: Workaround:

:global(#transcript-paragraph .selecto-selection) {
  background: rgba(68, 170, 255, 0.1) !important; /* some weird opacity bug */
}

[daybrush]

@benwoodward

It is a very difficult unknown problem. Since it is not reproduced, I think I need to check the demo address, OS, and Chrome version that I can test.