Bug on short sites - Githubissues

csoLs commented 9 years ago

If used on a short website (in fact the shorter the weirder behavior), the miniregion height as well as the width/height ratio on the minimap seems to bug... Alot.

This is the 'wrong' behavior: temp-git This is seems to be better: temp-git-right

princejwesley commented 9 years ago

Thanks for letting me know. Can you post the page setup with dummy text or send to my email address (princejohnwesley@gmail.com) for diagnose the issue?

Thanks again!

csoLs commented 9 years ago

Sure, no problem! This is a scaled back version, but the bug seems to be consistent on all short sites.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Demo | start.php</title>
    <style type="text/css">
    *, *:before, *:after {
        margin: 0;
        padding: 0;
        border: 0;
        -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
        display: block;
    }
    body {
        margin: 35px 200px 0;
        font-size: 1.25em;
        line-height: 1.5em;
        background: rgb(39,40,34);
        color: rgb(134,134,134);
    }
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="minimap.min.css" />
        <script src="minimap.min.js"></script>
</head>
<body>
    <header class="header" role="banner">       
        <nav role="navigation">
            <a  class="active" href="">
                start <span class="close"></span>
            </a>
            <a  href="about">
                about <span class="close"></span>
            </a>
            <a  href="contact">
                contact <span class="close"></span>
            </a>
        </nav>
    </header>

    <main class="main" role="main">
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <hr>
        <h2>Sub heading</h2>
        <hr>
    </main>
    <footer class="footer minimap noselect" role="contentinfo">
        <div class="copyright">
            <p>Copyright © 2014</p>
        </div>
    </footer>

<script type="text/javascript">
    var previewBody = $('body').minimap({
        heightRatio: 0.2,
        widthRatio: 0.1,
        offsetHeightRatio: 0.06,
        offsetWidthRatio: 0
    });
</script>

</body>
</html>

I'm testing on 1920x1200, both Firefox 33 and chrome 38, and here is an fiddle.

princejwesley commented 9 years ago

Added font-size: 1em; in .minimap class to resolve this issue. here is the fiddle. Confirm the fix to push it.

princejwesley commented 9 years ago

Closing this issue for now.

csoLs commented 9 years ago

Hey, sorry for the lack of response. I've been out of town...

No, adding font-size: 1em does not solve the problem. I believe that the real problem is somewhat related to the scale functionality:

var scale = function() {
    return {
        x: ($window.width() / minimap.width()) * settings.widthRatio,
        y: ($window.height() / minimap.height()) * settings.heightRatio
    };
};

No matter what the content height is, the smallest value for $window.height() will always be the full viewport height, resulting in some weird outstretched minimap if/when the content is shorter than the full viewport. What if you could work around that by using something like document.body.scrollHeight instead?

princejwesley commented 9 years ago

I am aware of this problem. I assumed that dom content is always bigger than view-port. I'll fix this use-case.

Thanks!

princejwesley / minimap

Bug on short sites #1