Lightbox Not Center When in Mobile View (Responsive)

[riyantowibowo]

I don't have any clue why when Lightbox opened in mobile view it doesn't appear in the center of screen.

But for desktop view and demo, it seem okay.

I think it has an issue in css transform. So for temporary solution I just put css transform:none, yes that will make the lightbox to center But I can't drag or zoom with css transform:none

[fritz-c]

Can you reproduce this in a fork of this example? https://codesandbox.io/s/wkw2mjm5l8

[riyantowibowo]

hi @fritz-c unfortunately I can't replicate in this fork https://codesandbox.io/s/yp2jlmno9 I am pretty sure my code just like that, I just put one image in lightbox and little bit modify css, that's all what I did

[fritz-c]

Can you give me some details about what kind of modifications you made in the css? There's a decent chance something got inherited inside the lightbox.

[riyantowibowo]

I customise css for design implementation purpose

• custom loading animation
• custom close button
• hide zoom in/out buttons

.ReactModal__Body--open{
	.ril__loadingContainer__icon{
		background: url(/assets/images/rolling.gif);
		background-size: contain;
		*{
			display: none
		}
	}
	.ril__outer{
		background-color: rgba(0, 0, 0, 0.8);
	}
	.ril__toolbar{
		background-color: transparent;
	}
	.ril-toolbar-right .ril__toolbarItem{
		display: none;
		background-color: $c-black;
		border-radius: 100%;
		width: 50px;
		height: 50px;
		text-align: center;
		line-height: 2.3em;
		margin-top: 20px;
		@media only screen and (max-width: 1023px){
			width: 40px;
			height: 40px;
			line-height: 1.8em;
		}
		&:last-child{
			display: inline-block;
		}
	}
	.ril__image{
		@media only screen and (max-width: 1023px){
			transform: none !important;
		}
	}
}

[nidhi-tandon]

@iyasayariyan Hey...Have you solved this issue? I am getting the same issue in my project.

[fritz-c]

@iyasayariyan Is this still broken for you in the latest version? I think it might be due to a default max-width style in some frameworks that I have since merged in a fix (#73) for. I'm basing this off of this comment.

[l29ah]

Got this on palemoon from git, but works ok on firefox-esr.

[vekerdyb]

I see a similar issue, but only with portrait images only on iOS. (Chrome, Safari.)

Sometime the image is not visible at all, and when pressing zoom it becomes visible.

I wasn't able to reproduce on any other device / screen size.

I will provide more info when I get home -- I don't have my iPhone cable to debug on me.

[AonanLi]

It still happens on my phone, even after the max-width fix. It only happens to portrait taken images. On my pc it doesn's show the correct image orientation, but the size and center is ok. On iOS it shows the orientation correctly, but the center is far away from the screen. I'm assuming there is a process changing image orientation based on the orientation data stored in the photo, and this process doesn't handle the image width or height correctly, which leads to a wrong calculation to the css transform coordinates.

[OPY-bbt]

Have you solved this issue? I am getting the same issue in my project. but only in iOS this version can solve this problem https://www.npmjs.com/package/@zhyabs1314/react-image-lightbox

[sami616]

Seeing this too sadly.

[yuzhakovvv]

Same here. Happens in WebView on iOS

[kaYcee]

Seeing this too. Seems to affect especially images with a specific EXIF orientation that Safari on iOS auto-rotates.

[BrunildaNinox]

have you guys solved this?

[OPY-bbt]

#122

[maxim-pushchinskiy]

have the same issue. I even can reproduce it on desktop, if width of my browser window will be less than width of image. I guess the reason of this behavior in getTransform method. I don't understand for which case we need this code: if (width > windowWidth) { nextX += (width - windowWidth) / 2; } But if we remove it, everything works fine, except animation.

[maxim-pushchinskiy]

if someone try to find solution: you can or remove discourageDownloads flag or https://github.com/frontend-collective/react-image-lightbox/pull/193

[samvk]

I was able to fix this issue for me by setting max-width: none; and max-height: none; on ril images (my library had both of those 100% by default). The former looks to already be overridden - should probably also include the latter.

[stevomcnevo]

Add this to styles:

.ril-image-current { max-width: none !important; }

[saravanan0701]

.ril-image-current { transform: none !important; }

this helped me solve the issue

[pritam693]

This solves the issue but disables the zoom feature

.ril-image-current { transform: none !important; }

this helped me solve the issue

but this disables the zoom feature