Google Chrome - Rendering differences when zooming in/out

Question

When I created some code, I noticed something strange. The DOWNLOAD button touches the end of the left wall, there is no gap (500% zoom). But when I decrease the zoom from 500%

Answer 1

In my experience this sort of thing is a rendering 'quirk', rather than a 'bug' per se. When you change the zoom level of a document, you're asking the browser to scale your '1px' border to a different number of pixels wide. Sometimes this doesn't equal a whole number of pixels, so the browser needs to do something to account for that. That something might be anti-aliasing, rounding widths to the nearest pixel, etc. This sort of thing needs to happen whenever you have anything that's not a whole number of pixels on screen. It's one of those things that happens at high-zoom levels, and in most cases it's not a big enough problem to worry about.

If it is a problem in your case, you can try doing things to minimise the effect, for example:

• Use non-pixel measurements border: 0.1rem solid #CCC
• Adjust the way the background is drawn: for example, include spacer elements between your buttons, and background color them, leaving the containing element background the same color as its border.
• Experiment with small margin, transform or position adjustments (0.5px - 1px) to nudge the element slightly over the border.

These are all indirect ways of tricking the browser's renderer into doing something that's better for your specific case, and I'm not sure any of these will actually work. They might have undesirable side effects in other OS's and browsers, too.

TL:DR - It's the browser, and don't worry about it unless you really need to!

Answer 2

this is display:inline-block; issue because of inline-block use some spacing Use float: left instead of display: inline-block,

Use this css

.modelerInputReportDiv span {
     float:left;
}
.modelerInputReportDiv button {
     float:left;
     vertical-align: middle;
        cursor: pointer;
        font-weight: bold;
        padding: 8px;
        color: #fff;
        border: 1px solid #ccc;
        background: #0066cc;
        margin-left: 5px;
}