CSS strange thing happening when scaling

Question

this is my first post here. I don't know how to explain my problem because I don't really know what is causing my CSS code to break. It would be easier to show you in a photo.

So I have a div tag and input and div child elements inslide. One of the div is static 32px x 32px and I am calculating its width with calc(100% - 32px), but when scaling some pixels aren't filled with the input.

Here's a photo of the problem: https://i.stack.imgur.com/3HwaG.jpg

This occurs when the zoom is not divisible by 100. For example it breaks on 110%, 150% and 175%. But it is right when the zoom is 100%, 200%, 300%...

Heres my code:

<div class="search">
    <input type="text" value="Search" class="search-text" />
    <div class="search-icon" ></div>
</div>

CSS:

.search {
    height: 32px;
    width: 250px;
}
.search-text{
    float:left;
    width: calc(100% - 55px) !important;
    display: inline-block !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0;width: 196px;
}
.search-icon{
    display: inline-block !important;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    float:right;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
}
input[type=text] {
   border-radius: 5px;
   border: 1px solid #acb6be;
   min-width: 180px;
   color: #acb6be;
   padding: 0 10px;
   height: 30px;
   background-color: #fff;
   font-weight: 600;
}

Or jsfiddle: http://jsfiddle.net/39VDR/1/

Answer 1

The problem happens because when you zoom, your values will not be integer anymore. This means that rounding will take place and the outer container (.search) will be 1px larger than you would expect.

You can remove the float:right on the .search-icon and it will work ok.

You can see it here:

http://jsfiddle.net/39VDR/4/

.search-icon{
    display: inline-block;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
    font-size:12px;
    vertical-align: top;
}

Still, as mentioned, you can remove the !important if you just add more specificity to your selectors.