Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slick inside fieldset, on Chrome causes crazy width calcs

See original GitHub issue

At this stage I haven’t had a chance to dig into the code and see what is happening, but here’s the repeatable issue.

If the carousel is inside a fieldset and you view it on Google Chrome, the slick-slide width gets blown right out (22000+), and it keeps getting bigger if you click on arrows etc

Stripped down the code to below, which demonstrates the issue. I f you remove the fieldset tag, all works as expected

http://jsfiddle.net/jimmyrose/fc5mmtmh/1/


<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link href="/Vendor/slick-1.3.13/slick/slick.css" rel="stylesheet"/>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
    <body>
        <fieldset>
            <legend>Photos</legend>
            <div class="carousel">
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div> 
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div>
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div>
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div>
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div>
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div>
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div>
                <div class="attachment"><img src="/Attachments/View/88?thumb=True" title="" alt="Jellyfish.jpg"/></div>   
            </div>


        </fieldset>
        <script type="text/javascript" src="/Vendor/slick-1.3.13/slick/slick.js"></script>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('.carousel').slick({
                        slidesToShow: 4,
                        slidesToScroll: 2
                    });
                });
        </script>
    </body>
</html>