Search code examples
cssgoogle-chromecomputed-style

Chrome Computing Styles Incorrectly

I seem to be having an issue with Chrome's computes styles. On certain elements on certain installations of chrome, the computed style differs from the css enter image description here

The error occurs on several elements throughout the page but does not appear in safari or firefox on the same computer. Only half of the developers on the project have had this issue and it seems to come and go every few days...

Any ideas?

EDIT: I have a retina MPB and another developer with the issue has a 13" MacBook Air both running Mountain Lion

EDIT 2: This is the block of css that produces the computed style in the screenshot (although not the only one with the error

#nav-items div.item {
margin-left: -4px;
height: 64px;
display: inline-block;
text-align: center;
font-family: "HelveticaNeueW01-77BdCn 692722";
font-size: 26px;
text-shadow: 0px 1px 0px rgba(255,255,255,0.90);
line-height: 64px;
background-color: eee;
border-top: 1px double #ccc;
}
Solution

  • I reproduced the same issue with the following code and View -> Zoom In (once)

    This changed my font size from 26px to 26.363636016845703px

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">
  #nav-items div.item {
  margin-left: -4px;
  height: 64px;
  display: inline-block;
  text-align: center;
  font-family: "HelveticaNeueW01-77BdCn 692722";
  font-size: 26px;

  text-shadow: 0px 1px 0px rgba(255,255,255,0.90);
  line-height: 64px;
  background-color: eee;
  border-top: 1px double #ccc;
}
</style>

</head>
<body>

<div id="nav-items">
  <div class="item">Hello World</div>
</div>
</body>
</html>

    The fix was to change the zoom back to normal: View -> Actual Size