Bug entering fullscreen on chrome

[daltimus11]

This is a bug that can be witnessed on the demo page.

In Chrome, when entering fullscreen from Photoswipe there is a white or transparent section that flashes at the bottom of the screen. It happens 100% of the time on the android devices I've tested. It happens less on desktop, but it still occurs with varying frequency.

It even occurs when triggering fullscreen browser side with F11. It also occurs in lightgallery, and fslightbox. I am not a very experienced programmer, but this makes it appear to me that it's not an issue with Photoswipe's implementation of the fullscreen API. But, a problem with chrome and lightboxes going fullscreen in general?

I attempted a solution using a black overlay on the site while Photoswipe was open, but it did not solve this. So as of right now I will disable the fullscreen option from Photoswipe on chrome because in my opinion this is very unappealing visually.

Is there anything that can be done to fix this?

Edit: I've been looking through more lightbox galleries with fullscreen capabilities and I haven't found one yet where this doesn't occur.

[daltimus11]

I improved on my first idea and it works as a decent workaround for this. However, sometimes there is still an area of transparency that flashes and shows the site behind it (possibly android only). Ideally this would be fixed in a better way, but it is adequate for me to continue to use the fullscreen function.

Add the new code to your initialization:

gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

// apply temporary background color to fix chrome bug
sleep(333).then(() => {  //sleep time should match photoswipe open animation length
    document.body.style.background = "#000000";
});

// return background to original on close
gallery.listen("unbindEvents", function() {
    document.body.style.background = "#ffffff"; // insert your original background color
});

Add this before initialization in your javascript:

// define Sleep
const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
};

[acwolff]

I don't see that effect in my albums I think, do you see it in this album: https://andrewolff.jalbum.net/PS_JustifiedGallery/ ?

[daltimus11]

@acwolff Thanks for the reply,

I should clarify I've seen two different things happening, and now three with your album.

1: A box matching the background color of the website appearing on the bottom of the screen in the middle of a fullscreen transition. - PC Chrome, and Android Chrome. 2: A transparent box revealing the website on the bottom of the screen in the middle of a fullscreen transition. - Possibly only on Android Chrome.

3. A black box appearing on the bottom of the screen in the middle of a fullscreen transition. - Possibly only on Android Chrome.

To me, it looks like what is happening on your site for PC Chrome, is that your backgrounds already match, so the box isn't noticeable. I suspect if you changed them to not match, you would see it there too. But, I don't think it's intended that we must have the body background and Photoswipe background the same to avoid this happening. Also, as mentioned in the list, I see a black bar during the transition in your album on Android Chrome.

Do you see it occurring on the Photoswipe demo page, or the black bar on your site with Android Chrome? I find it really odd that on my website and the demo I see a transparent section (and white), while on your album it is black.

[acwolff]

Well @daltimus11 apparently your eyes are much better as my eyes, because I don't see this 3 effects in my album. But if I open the demo page on my PC with Chrome, I see indeed a white flash if I open full screen. So apparently it helps to display the initial thumbnails page in the same background color as is used in the light-box. I did test this with another light-box and I see there the same effect. See my jAlbum FancyBox test album where the thumbnails page background is white and the light-box background is black.

Edit:

In my PhotSwipe skin I solved this problem I think by selecting full screen if I open the light-box, see this jAlbum PhotoSwipe test Album. Click the fullscreen button on top of the thumbnails page and open a ligth-box. I hide the fullscreen button in the light-box.

[daltimus11]

I realized there was a problem with the previous code I posted. It caused a black background to be visible during a vertical drag to close, or a pinch to close, because the background wasn't changed back to normal until Photoswipe closed. There is a fix for it, but requires editing photoswipe.js and photoswipe-ui.js.

In photoswipe-ui.js:

ui.showControls = function() {
    document.body.style.background = "#000000";     // add this line
    _controlsVisible = true;

In photoswipe.js:

if(_direction === 'v' && _options.closeOnVerticalDrag) {
    if(!_canPan()) {
        document.body.style.background = "#ffffff";    // add this line with your background color
        _currPanDist.y += delta.y;
        _panOffset.y += delta.y;

Another in photoswipe.js:

if(_options.pinchToClose && !_wasOverInitialZoom && _startZoomLevel <= self.currItem.initialZoomLevel) {
    // fade out background if zooming out
    document.body.style.background = "#ffffff";    // add this line with your background color
    var minusDiff = minZoomLevel - zoomLevel;
    var percent = 1 - minusDiff / (minZoomLevel / 1.2);