RoyalSlider's height is minimum on init in Safari

Question

I am using enquire.js to set my RoyalSlider's height dynamically to the height of the element right next to it. This is working in Firefox, but in Safari on load, the height of the slider is the minimal height possible (so the height of the arrows). Only after I resize the window, the correct height is adapted.

enquire.register("screen and (max-width: 53.999em)", {
    match : function() {
        $('.slide').css('height', "10em");
    }
}).register("screen and (min-width: 54em)", {
    match : function() {
        var height  = $('.one:first').outerHeight(true) * 2;
        $('.slide').css('height', height);
        window.onresize = function() {
            var height = $('.one:first').outerHeight(true) * 2;
            $('.slide').css('height', height);
        }
    },
    unmatch : function() {
        $('.slide').css('height', "10em");
    }
});

I tried to set a static height in CSS for the inital load, but the style is not adapted.

score 0 · Accepted Answer · edited May 23 '17 at 12:13

Got it working now with a solution just using CSS :)

See this: https://stackoverflow.com/a/6615994/1478344

HTML:

<div id="slide-container">
     <div id="slide">
         SLIDE
     </div>
</div>

CSS:

#slide-container
{
display: inline-block;
position: relative;
width: 66.666%;
}
#gallery-container:after
{
content: '';
display: block;
margin-top: 30.333%;
margin-top: -moz-calc( 33.333333% - 1.111111em ); /* because of some padding things */
margin-top: -webkit-calc( 33.333333% - 1.111111em ));
margin-top: calc( 33.333333% - 1.111111em );
}
#slide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}

Though for the future I don't know why it didn't work …

RoyalSlider's height is minimum on init in Safari

1 Answers1