Text zoom on mobile when click on an accordion title

StackOverflow https://stackoverflow.com/questions/22552810

Question

Got a strange one if anyone can help?

Very basic page with an accordion

It doesn't have the viewport meta tag as the site wants to display full sized when viewed on a mobile, i.e it looks really small and you have to do a lot of pinch zoom

On a mobile, the page renders as you would expect on page load, however, when I click on a title to expand the accordion, all the text goes larger?

Any ideas?

http://www.darrencousins.com/lab/accordion/

HTML

<!doctype html>


<head>

    <meta charset="utf-8">

    <title>Accordion</title>

    <link rel="stylesheet" href="assets/css/global.css" />

</head>

<body>

        <div class="pageContainer">

            <h1>Accordion text zoom problem</h1>


            <div class="accordion">

                <div class="accordionPanel">

                    <div class="titleHeader">
                        <p>Title One</p>
                    </div>

                    <div class="contentDetails">
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                    </div>

                </div>



                <div class="accordionPanel">

                    <div class="titleHeader">
                        <p>Title Two</p>
                    </div>

                    <div class="contentDetails">
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                    </div>

                </div>

            </div>

        </div>


    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script src="assets/js/global.js"></script>

</body>

CSS

    html, body                                              {margin:0; padding:0; font-family:"Arial", sans-serif}

html                                                        {font-size:62.5%}

body                                                    {font-size:1.2em;}

    .pageContainer                                      {width:960px;}
    p                                                   {margin:0; padding:0; font-size:1.2em;}

    /* Accordion */
        .accordion                                      {margin:0; padding:0; border:1px solid red}

        /* Title */
        .accordion .titleHeader                         {background:#00a4dd; color:white; position:relative; margin:0 0 3px; cursor:pointer;}
        .accordionPanel.active .titleHeader             {background:#00a4dd}

        .accordion .contentDetails                      {display:none; margin:0 0 3px; padding:20px 10px; background:white;}

    /* END Accordion */

jQuery

    $(document).ready(function()
{

        /*-----------*/
        /* ACCORDION */
        /*-----------*/
            $('.accordionPanel .titleHeader').on('click', function()
            {
                $(this).parent().toggleClass('active');
                $(this).siblings('.contentDetails').slideToggle(function()
                {
                    // fixFooter();
                });
            })


            if ( $('.accordionPanel').length )
            {
                $('.accordionPanel').each(function()
                {
                    if ( $(this).hasClass('active') )
                    {
                        $(this).children('.contentDetails').show(function()
                        {
                            // fixFooter();
                        })
                    }
                })
            }

        /*---------------*/
        /* END ACCORDION */
        /*---------------*/

});

$(window).load(function ()
{

});
Was it helpful?

Solution

I've managed to fix it.

The problem seems to be more prominent in Android and sporadic in iOS.

When the viewport meta tag is not specified and the text is contained within a hidden div, it's height cannot be determined, this dynamic height is what is causing Android to use "font boosting"

To prevent this boosting, simple set a max-height on the parent container, the bigger the better.

CSS

.accordion        {max-height:1000000px; margin:0; padding:0; border:1px solid red}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top