When I have a full width, fluid container my text in google chrome becomes distorted (too big), but none of the other browsers. Why?

Question

.container-fluid{
    background-color: $white;
    padding: 0;

    &.featured{
        max-width: 1300px;
    }
}

So, I set this to container fluid, and set max width on the main content (.featured), I have a top nav which remains full page width. If i zoom out a lot in chrome, the text becomes distorted. I can't see any font changes I'm making on media queries to cause this, and it's working fine in safari and firefox.

Any Ideas on how to resolve this or what I should dig more into?

chrome:

same zoom, but with firefox:

Can you post more html and css, and / or create a simple demo on [jsfiddle](http://fiddle.jshell.net/) or similar site? — Ori Drori, Sep 16 '15 at 15:48
According to bootstrap zooming in some browsers are not supporting [See this Bootstrap Zooming](http://getbootstrap.com/getting-started/#support-browser-zooming) Can you post a simple demo on jsfiddle ? .. so that we can get for more information about your issue — User_3535, Sep 19 '15 at 11:51

score 4 · Answer 1 · answered Sep 21 '15 at 15:04

If I got your question right, you need to end to your featured definition:

.featured {
    overflow-wrap: break-word;
}

Make sure the featured element can scale horizontally, i.e. does not have max height.

If this was not the problem, please post a codepen/fiddle

When I have a full width, fluid container my text in google chrome becomes distorted (too big), but none of the other browsers. Why?

1 Answers1