CODEWITHSUNDEEP
javascriptjquerycssflexslider
Jen M-check
Jen M-check

Reputation: 11

Flexslider not loading first slide in Chrome + Safari

iamjen.me/yercheck

So I'm using this on my new site above, and have tried all of the solutions shown at this thread: Flexslider slow image load (separately, of course), but the problem is still persists in Chrome and Safari. However, in FF and on mobile, things are loading beautifully (I haven't tested on a PC yet). Right now, I have Alfred Larsson's solution in place. I tried each with and without adjusting the initDelay in the js, because in my case, the first slide wasn't showing at all--it was jumping straight to the second, so I tried delaying so I could at least see the first slide. Currently, the initDelay is set to 1400ms, which is undesirable, but it's the best option I have until I can solve the bigger loading issue.

Here's the code from flexslider.css referenced above:

.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}

.flexslider .slides > li:first-child {
    display: block; 
    -webkit-backface-visibility: visible;
}

My HTML is pretty innocuous:

<div id="home-slider" class="flexslider">           

<ul class="slides styled-list">

<li class="home-slide"><p class="home-slide-content">
I like things that are<span class="highlight"> easy to use</span></p></li>

<li class="home-slide"><p class="home-slide-content">
I <span class="highlight"><i class="icon-heart"></i></span> technology</p></li>

<li class="home-slide"><p class="home-slide-content">
I think <span class="highlight">failure</span> gets a bum rap</p></li>

<li class="home-slide"><p class="home-slide-content">
And I totally <span class="highlight">dig</span> end users</p></li>

</ul>
</div><!-- END FLEXSLIDER -->

Any advice on why it's still not working in Chrome and Safari, but loads as expected in FF and on mobile? It's clearly not a site weight issue, so I'm stumped. Thanks!

Upvotes: 0

Views: 2378

Answers (2)

Christian
Christian

Reputation: 1

I found this solution to the Safari headache in flexslider, it is a little tedious if you have a responsive site but so far has worked on all browsers even after clearing the cache multiple times.

in the CSS where your flexslider code is look for

.flexslider .slides > li {
    display: list-item;
    min-height: 583px;
    -webkit-backface-visibility: hidden;
}

Now, this works for me because all of my starting images are the same dimension so I set the min-height to my common starting size for the images. For example if all of your images that you are starting with are 600px in height then set the min-height to 600px.

Secondly, you will have to adjust that min-height for the various break points in the responsive media queries so I have set some varying ones for the following screen dimensions

I have added the following for the different break points based on the height of the starting image

@media (max-width:1199px) {
    .flexslider .slides > li {
        min-height: 451px;
    }
}

@media (max-width:979px) {
    .flexslider .slides > li {
        min-height: 516px;
    }
}

@media (max-width:767px) {
    .flexslider .slides > li {
        min-height: 435px;
    }
}

@media (max-width:640px) {
    .flexslider .slides > li {
        min-height: 311px;
    }
}

@media (max-width:480px) {
    .flexslider .slides > li {
        min-height:  218px;
    }
}

@media (max-width:420px) {
    .flexslider .slides > li {
        min-height: 218px;
    }
}

This is a bit of a hack fix but it's worked for me and may help someone else out there looking to overcome the safari bug, check out my website and the portfolio section at www.christiantomiak.com/portfolio3.html, reason for starting there is the home page has an image preloader which also works to overcome this bug but not if someone isn't landing on the home page.

Upvotes: 0

Jen M-check
Jen M-check

Reputation: 11

After studying the javascript and CSS intently (me and multiple others), things just weren't adding up. Finally, I took my index.html code and the original Jarvis theme code and section-by-section did a code compare to see where the major differences were.

Lo and behold, I isolated the problem in the most unlikely of places! The video embed shortcode provided with the theme causes issues once a source is defined. I think it has to do with the size of the video, and it's trying to basically load the video before it displays the slider (code below). 

<div class="sixteen columns">
<h3>Responsive Video</h3>  
<iframe src="http://player.vimeo.com/video/34234286?color=f2eee5" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="fitvid600154"></iframe>
</div>

Remove the iframe embed, and the video loads perfectly (although then there were some css display issues, but those are easily solved). Replace it, and the loading problems are back. I don't know where in the javascript to correct this, so if anyone knows how to correct this so the slider displays while this is still loading, that would be great.

Upvotes: 1

Related Questions