igordanchenko/yet-another-react-lightbox

Lightbox does not apply overlay with black background

AlexString opened this issue · 2 comments

Describe the bug

Lightbox does not apply overlay with black background and instead it renders at the bottom of the page.

I installed this package yesterday in version ^3.11.4.

I left it working like this:
image

This morning and without touching my commit I did yesterday (just running the project to see if it works), clicking on an image to view it looks like this:
image

I have checked this in two browsers, Vivaldi and Firefox Dev Edition and both look the same.

Expected behavior

Have overlay with black background like before

How to reproduce

Just copied an Example and made it component, it worked perfectly yesterday

import * as React from 'react'
// Lightbox
import Lightbox, { LightboxExternalProps } from "yet-another-react-lightbox";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import Video from "yet-another-react-lightbox/plugins/video";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/plugins/captions.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

interface IPictureViewerProps {
	open: boolean;
	close: () => void;
	slides: LightboxExternalProps['slides']
}
const PictureViewer: React.FC<IPictureViewerProps> = ({
	open,
	close,
	slides
}) => {
	return (
		<Lightbox
			open={open}
			close={close}
			slides={slides}
			// zoom={{ maxZoomPixelRatio: 32 }}
			plugins={[Captions, Fullscreen, Slideshow, Thumbnails, Video, Zoom]}
		/>
	)
}

export default PictureViewer

Screenshots / Logs

No response

Additional context

Ignore the red rectangle that is on the zoom buttons, that was a screenshot from yesterday

Duplicate #133

My bad!