How to Reproduce

Open the file.
Reduce the size of the browser.
Check if the last sentence Am I am visible is visible.

In chrome (37.0.2062.94 ), on first reducing the sentence is visible. When changing again to full size the scrollbar disappears.

In Mozilla 32 reducing don't show the scroll bar itself.

It could not detect when I increase the font size also. See code below.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Mobify">
    <meta name="description" content="A responsive, mobile first accordion UI module from Mobify">
    <meta name="keywords" content="mobify,mobile,modules,ui,responsive,carousel,scooch,slider">
    <title>Mobify Modules</title>

    <link rel="stylesheet" href="http://cdn.mobify.com/modules/pikabu/0.2.2/pikabu.css">
    <link rel="stylesheet" href="http://cdn.mobify.com/modules/pikabu/0.2.2/pikabu-theme.css">

    <link rel="shortcut icon" href="/static/img/favicon.ico">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="m-pikabu-viewport">
    <!-- the left sidebar -->
    <div class="m-pikabu-sidebar m-pikabu-left">
        <!-- left sidebar content -->
        Left
    </div>
    <!-- the main page content -->
    <div class="m-pikabu-container">
        <!-- Overlay is needed to have a big click area to close the sidebars -->
        <div class="m-pikabu-overlay"></div>
        <header>
            <a class="m-pikabu-nav-toggle" data-role="left">Left Menu</a>
            <h1>Pikabu</h1>
            <a class="m-pikabu-nav-toggle" data-role="right">Right Menu</a>
        </header>
        <section>
            <!-- Body content goes in here -->
            <h2><strong>Pikabu</strong> is a speedy, flexible framework for off-canvas flyout panels.</h2>

            <h3>Why use <strong>Pikabu</strong>?</h3>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p>Am I am visible</p>
        </section>
    </div>
    <!-- the right sidebar -->
    <div class="m-pikabu-sidebar m-pikabu-right">
        <!-- right sidebar content -->
        Right
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdn.mobify.com/modules/pikabu/0.2.1/pikabu.min.js"></script>
<script>
    $(function() {
        pikabu = new Pikabu();
    });
</script>
</body>
</html>

See attached image from firefox.

Thank you. screenshot from 2014-10-03 12 57 07

kpeatt commented 9 years ago

@harikt Thanks for the issue! I'll take a look at this and see if I can tell what's going on and get back to you.

harikt commented 9 years ago

Thank you :)

mobify / pikabu

Reducing the size of the browser #41

How to Reproduce