I have a gallery set up with a custom lightbox feature that I designed. The lightbox is styled with position:fixed and top:0, so theoretically it should stay in the same position regardless of scrolling. However, I am experiencing issues where this is not the case.
I have not been able to replicate the problem on a fiddle. You can view the gallery here: . You can test it on a mobile phone or use the device toolbar in Chrome.
There are two specific elements that are not behaving correctly with the position:fixed property:
.item-content{
width: calc(100% - 100px);
height: calc(100vh - 100px);
position: fixed;
top: 0;
left: 0;
margin: 50px;
}
.dupe.dupAnim{
top:0;
left:0;
width:calc(100% - 100px);
height:250px;
margin:50px;
position:fixed;
}
Any assistance in resolving this issue would be greatly appreciated!