zoomTo: Text

by secretgspot

HTML

<script src="https://raw.github.com/jaukia/zoomooz/master/jquery.zoomooz.min.js"></script>
<div id="container">
            <h1>Webkit text bug</h1>
        
            <p>Small font sizes look bad when zoomed to in Webkit. There is a way to make them look better but it requires making the text with double font size and then using css-transform to scale the element to half the size.</p>
            
            <p>If the element is not then absolutely positioned or cropped with overflow:hidden, the flow of the content will behave a bit weirdly.</p>

            <div id="item" class="zoomItem">
                This is some tiny text 1
            </div>
            
            <div id="item2" class="zoomItem">
                <span>This is some tiny text 2</span>
            </div>
            
        </div>

CSS

body {
    border:1px solid red;
    overflow:hidden;
    font-family: "Helvetica Neue";
    height:100%;
    margin:0;
    padding:0px;
}

#container {
    margin:100px;
}

h1, p {
    padding-bottom:25px;
}

div {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#item, #item2, #item3 {
    float:left;
}

#item {
    background-color:#fee;
    padding:30px;
    border:1px solid red;
    font-size:3px;
    margin-right:50px;
    margin-bottom:50px;
}

#item2 {
    background-color:#eef;
    border:1px solid blue;
    padding:30px;
    font-size:3px;
    margin-right:50px;
    margin-bottom:50px;
    width:93px;
    height:66px;
    overflow:hidden;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
}

#item2 span {
    display:block;
    font-size:15px;
    width:465px;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
}

JavaScript

$(document).ready(function() {
                $(".zoomItem").click(function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    $(this).zoomTo({debug:true, nativeanimation:true});
                });

                $(window).click(function(evt) {
                    evt.stopPropagation();
                    $("body").zoomTo({targetsize:1.0, nativeanimation:true});
                });

                // for iPhone
                $("#container").click(function(evt) {
                    evt.stopPropagation();
                    $("body").zoomTo({targetsize:1.0, nativeanimation:true});
                });

                $("body").zoomTo({targetsize:1.0, nativeanimation:true});
            });