Configurable options (size and color) not load

Question

Sometimes Configurable options are not loaded on product detail page and I get this error on the console

In firefox I get this error on console:

TypeError: settings.fotoramaApi is undefined

In chrome i get this error:

Uncaught TypeError: Cannot read property 'setOptions' of undefined on gallery.js:462

updateOptions: function (configuration, isInternal) {

    var $selectable = $('a[href], area[href], input, select, ' +
        'textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]')
        .not('[tabindex=-1], [disabled], :hidden'),
        $focus = $(':focus'),
        index;

    if (_.isObject(configuration)) {

        //Saves index of focus
        $selectable.each(function (number) {
        if ($(this).is($focus)) {
            index = number;
        }
        });

        if (this.isTouchEnabled) {
        configuration.arrows = false;
        }
        configuration.click = false;
        configuration.breakpoints = null;

        if (!isInternal) {
        !_.isEqual(settings.activeBreakpoint, {} && settings.brekpoints) ?
            $.extend(true, settings.activeBreakpoint.options, configuration) :

            settings.isFullscreen ?
            $.extend(true, settings.fullscreenConfig, configuration) :
            $.extend(true, settings.defaultConfig.options, configuration);

        }
        $.extend(true, settings.currentConfig.options, configuration);
        settings.fotoramaApi.setOptions(settings.currentConfig.options);

        if (_.isNumber(index)) {
        $selectable.eq(index).focus();
        }
    }
    },

I am using Magento 2.2.5, which occurs in both production and developer mode.

Configurable options are: size (dropdown) and color (swatches)

If I refresh the page or click add to cart error resolve and size, color appears.

How can I debug this issue?

Answer 1

the error was generated by this code (for desktop version)

.fotorama-item.fotorama {
    display:none;
}

change with

.fotorama-item.fotorama {
    position: fixed;
    right: -5000px;
}

Answer 2

The cause of this behaviour is the "display:none" css styling. Fotorama don't load in something that is hidden.

Se also here: fotorama cant get the api object