Chrome a very small image in lightbox

[meridPL]

Description

Hi,
I sometimes have a very small photo when I open the lightbox. That situation is random but most often I can observe it when I open a first-time tab in a browser.

What Can I do to the photo will be correct?

If I open devtools (F12) problem disappears
On the local server everything is good, the problem is only a production server.

Steps to reproduce

Here is a too small photo

Here is the photo which I want

Sample HTML markup

import React, { useCallback, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import LightGallery from 'lightgallery/react';
import lgZoom from 'lightgallery/plugins/zoom';
import lgVideo from 'lightgallery/plugins/video';
import { InitDetail } from 'lightgallery/lg-events';
import Img, { getPhotoURL } from '../Img';
import { LightGalleryMB } from '../../store/lightGallery';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-video.css';
import 'lightgallery/css/lg-zoom.css';
export type TlgItem = { url: string; type: 'photo' | 'yt' | 'video' };
export interface ILightGalleryComponent {
  data: (TlgItem | undefined)[];
  state: LightGalleryMB;
}
const LightGalleryComponent = ({ data, state }: ILightGalleryComponent) => {
  let lightGallery = useRef<any>(null);

  const onInit = useCallback((d: InitDetail) => {
    if (d) {
      lightGallery.current = d.instance;
      state.setLightGallery(d);
    }
  }, []);

  const getVideo = (item: any) => {
    if ('type' in item && item.type === 'video') {
      const obj = {
        source: [
          {
            src: item.url,
            type: 'video/mp4',
          },
        ],
        tracks: [
          {
            src: '{/videos/title.txt',
            kind: 'captions',
            srclang: 'en',
            label: 'English',
            default: 'true',
          },
        ],
        attributes: { preload: false, playsinline: true, controls: true },
      };
      return JSON.stringify(obj);
    }
    return null;
  };

  return (
    <LightGallery
      elementClassNames="hidden"
      onInit={onInit}
      licenseKey="0000-0000-000-0000"
      speed={100}
      backdropDuration={100}
      plugins={[
        lgZoom,
        lgVideo,
      ]}
      counter
      autoplayFirstVideo
      autoplayVideoOnSlide
      closeOnTap
      closable
      getCaptionFromTitleOrAlt={false}
      download={false}
      addClass="custom-bg"
      mobileSettings={{
        showCloseIcon: true,
      }}
    >
      {data.map((item) => {
        return (
          <a
            key={item?.url}
            data-src={
              item && ['yt', 'photo'].includes(item.type)
                ? getPhotoURL(item?.url)
                : null
            }
            data-video={getVideo(item)}
            style={{
              cursor: 'pointer',
              height: 'inherit',
              display: 'block',
            }}
          >
            <Img
              width={'100%'}
              height={'100%'}
              src={item && item.url ? item.url : ''}
              title={''}
              alt={''}
              objectFit="cover"
            />
          </a>
        );
      })}
    </LightGallery>
  );
};

export default observer(LightGalleryComponent);

Environment

• Browser and version - Chrome version 115.0.5790.110 (Official Build) (64-bit)
• OS - Windows (Next.js)
• lightGallery version - ^2.7.1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.