Twitter Bootstrap zooms text differently on Webkit (Chrome, Safari)

Question

I'm looking into using Twitter Bootstrap (with some customisations) for a site rebuild.

One problem is with page/text zooming on Webkit browsers like Chrome and Safari. These don't rewrap the text to the screen when zooming. Instead the text continues off the page requiring horizontal scrolling.

For an example, compare zooming the text on the Bootstrap home page on Chrome/Safari and Firefox - on Firefox even the responsive menubar works properly when there's not enough room for the menu text due to zooming.

This seems to be a known Webkit "feature" with pixel-based layouts, which can be solved by using em-based widths, which looks impractical with the standard Bootstrap (way too much to change and maintain).

So, is there any Bootstrap derivative around which uses em-based widths, or is there any way to add a snippet of css etc to work around the problem? It's the only thing so far stopping me from using Bootstrap on this project. I want the site to be accessible for lower vision users, who often zoom.

Would be nice if Webkit fixed the bug/feature to behave like other browser engines but I don't see that happening anytime soon unfortunately.

[update] Just to be clear, it's the full similar action to Firefox I'm after: zooming text stays constrained within columns, AND media queries realise the space on the screen is limited when text is zoomed and adjust the menu and number of columns accordingly. Fluid layouts help with constraining main article text, but the menus and sidebars are still a mess on Chrome/Safari when zooming.

Answer 1

You can set a slider as accessibility option for lower vision visitors of your site.. Just use text-resizing using jquery. No need to zoom the page. See this example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var os = $('p').css('font-size');
            var num = parseFloat(os, 10);
            var px = os.slice(-2);

            $('p').css('font-size', num / 1.4 + px);
            if (this.id == 'larger') {
                $('p').css('font-size', num * 1.4 + px);
            }
        });
    });
</script>

<a href="#" id ="larger">Larger [+]</a>
<br>
<a href="#" id="smaller">Smaller [-]</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing 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>