Spotlight Alters Colors

[JimiHFord]

Expected behavior

The spotlight preserves the original color of the content underneath it.

Actual behavior

The spotlight alters the colors. I've found it affects all colors, but it is especially noticeable with white backgrounds when you compare it to the default "tooltip"-white.

Here is the bug in our app:

The spotlight background color that is rendered is also #EDEDED in the image above too.

In our app, we are using Joyride like so:

// in render() method
return (
  <Fragment>
    <CreateReportJoyrideFinishedModal show={showModal} onClose={this.closeModal} />
    {run ? (
      <Joyride
        styles={{ options: { primaryColor: info.base } }}
        steps={[
          {
            target: '.jr-createReport-report-name-and-dates',
            placement: 'right',
            disableBeacon: true,
            spotlightClicks: true,
            title: __('Reports.Joyride.ReportNameTitle'),
            content: __('Reports.Joyride.ReportNameContent')
          },
          {
            target: '.jr-createReport-apply-filters',
            placement: 'right',
            spotlightClicks: true,
            title: __('Reports.Joyride.ApplyFiltersTitle'),
            content: __('Reports.Joyride.ApplyFiltersContent')
          },
          {
            target: '.jr-createReport-select-columns',
            placement: 'left',
            spotlightClicks: true,
            title: __('Reports.Joyride.SelectColumnsTitle'),
            content: __('Reports.Joyride.SelectColumnsContent')
          },
          {
            target: '.jr-createReport-preview-report',
            placement: 'top',
            title: __('Reports.Joyride.PreviewReportTitle'),
            content: __('Reports.Joyride.PreviewReportContent')
          },
          {
            target: '.jr-createReport-create-report',
            placement: 'top',
            title: __('Reports.Joyride.CreateReportTitle'),
            content: __('Reports.Joyride.CreateReportContent')
          }
        ]}
        scrollToFirstStep
        continuous
        showProgress
        showSkipButton
        debug
        run={run}
        callback={this.callback}
      />
    ) : null}
  </Fragment>
);

Steps to reproduce the problem

• visit the CodeSandBox demo that I've modified to have a white background in the "OUR PROJECTS" area (this is just to make the bug more noticeable - the bug is present on the original demo as well)
• click "Let's Go!" to start the joyride
• click "Next (1/4)"
• visually inspect the spotlight background color and compare to "true white" in the tooltip background
• optionally install ColorZilla and verify that the spotlight background color being rendered isn't quite white (instead it's #EDEDED)

React version

16.4.2

React-Joyride version

2.0.0-15

Browser name and version

Google Chrome Version 70.0.3538.67 (Official Build) (64-bit)

OS & Hardware

macOS Mojave v10.14 MacBook Pro (15-inch, 2017) Processor: 2.8 GHz Intel Core i7 Graphics: Radeon Pro 555 2048 MB Intel HD Graphics 630 1536 MB

Error stack (if available) No errors

I tried experimenting with michalkow's fix but I still get the same behavior. My guess is that @michalkow would see this if he inspected the colors with ColorZilla.

[JimiHFord]

Ok this is bizarre. If I have Chrome open on my retina display (built-in to the laptop), the spotlight doesn't alter the colors and the background of the tooltip renders as #fff. If Chrome is open on my external monitor (HP EliteDisplay E242), then I see the buggy behavior where the spotlight alters the colors.

Maybe mix-blend-mode isn't the way to go 🤷‍♂️

[JimiHFord]

I reproduced this in Safari as well.

Version 12.0 (14606.1.36.1.9)

Unable to reproduce in Firefox.

Version 62.0.3 (64-bit)

[JimiHFord]

Just throwing this out there too - on one external monitor, the color of the spotlight is #EDEDED and on the other external monitor (identical hardware), the spotlight color is #EAEAEA / rgb(234,234,234).

Somewhere I read that the monitor's color settings have been known to affect the behavior of mix-blend-mode for some browsers but I can't find that resource at the moment.

I think it's safe to say this isn't an issue with react-joyride especially given some of the history behind mix-blend-mode.

Is this ticket sufficient for documenting this as a known issue? Somewhere I've seen @gilbarbara mention FAQ for this project but I haven't found what he was talking about.

[gilbarbara]

@JimiHFord There's no FAQ currently. This issue might help others. Thanks