search

gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.88k stars 529 forks source link

Joyride Overlay doesn't show on Internet Explorer & MS Edge when a step's target is body or html #433

Closed cvincent-atmanco closed 5 years ago

cvincent-atmanco commented 6 years ago

Expected behavior To display an overlay with a background-color of rgba(0, 0, 0, 0.5) when a tour targets an element such as body or html.

Actual behavior The step displays correctly, but no overlay is visible. It seems like the property background-color: rgba(0, 0, 0, 0.75) is never applied to the .joyride-overlay. All other inline styles are set, except the background-color.

Steps to reproduce the problem Create a react-joyride with a single step that has a target of body or html and open the page in Internet Explorer or Microsoft Edge. You can also notice the issue when opening the demo in those browsers. I have also tried changing the styles prop like this (without success on IE or Edge):

styles={{
options: {
overlayColor: 'rgba(0, 0, 0, 0.75)'
}
}}

React version 16.4.1

React-Joyride version 2.0.0-15

Browser name and version Internet Explorer 11 Microsoft Edge 42

Error stack (if available)

If you want to get this issue fixed quickly, make sure to send a public URL or codesandbox example. https://2zpjporp4p.codesandbox.io/

santimendoza commented 6 years ago

If you're targeting body or html, where do you want the overlay to be displayed? I mean, you're selecting the whole page.

cvincent-atmanco commented 6 years ago

Targeting body is shown in the 'Basic' demo of Joyride. On all browsers (but IE & MS Edge), the step is centered in the page, and the overlay is displayed over everything (but the step). Are you saying that the IE & MS Edge behaviour is actually the desired behaviour and what I'm seeing in Chrome & others is a bug? If that's the case, I think it should overlay everything when using a centered step...

jlabeit commented 5 years ago

In the meantime for anyone also having this problem. A hack that fixed it for us it to add the following css.

.joyride-overlay:empty {
  background-color: rgba(0, 0, 0, 0.5);
}

The :empty selector makes sure that the background color is only set when there's no spotlight as child in the overlay.

gilbarbara commented 5 years ago

Fixed in db10e365a496abfa287d1e60961cc9907bfc9a4f