2

I've got a webpage with a div fully filling up another div.

<div id="outer">
  <div id="inner"/>
</div>

The style is as follows:

#outer {
  background: blue;
  border: 1px solid red;
  height: 44px;
  width: 44px;
}
#inner {
  background: yellow;
  border: 1px solid green;
  height: 42px;
  width: 42px;
}

Feel free to check out the corresponding codepen.

In Firefox this renders fine. In Chrome the background of the outer div shows because it renders as too large. In addition, the border is too far away. Here are the renderings.

Chrome render Firefox render

See the extra blue rim on the bottom and right for Chrome (left) that's not present for Firefox (right). Why is this? And how can I prevent it? (I'm guessing it has something to do with Chrome rounding off pixels when scaling? Is Codepen scaling its output or something?)

Hildo Bijl
  • 83
  • 1
  • 4
  • 2
    Have you checked your browser zoom-in percentage (Ctrl + mouse wheel)? – VvV Jun 13 '17 at 23:24
  • @Victoria Good catch, it's the zoomed-in state. Even then it would be interesting to know why it happens on chrome though. If anyone has the answer please reply to me here so I will be notified, you'll get an upvote in return. – Ced Jun 13 '17 at 23:34
  • I'm having trouble replicating your error. It looks fine on my Chrome – yoursweater Jun 13 '17 at 23:53
  • I wanted to post as an answer rather than a comment. But since this isn't a true solution to the issue, I can't say that this is a real answer. That said, I found a similar post from a year ago on stack overflow that may shed some light. It basically has to do with how Chrome interprets borders vs margins. In any case here is a link to that post and the user providing the answer gives an interesting, mathematical possible work around for the issue. Here is the url for that post: https://stackoverflow.com/questions/34676263/sub-pixels-calculated-and-rendered-differently-among-browsers – Shenole Latimer Jun 14 '17 at 03:55
  • Thanks for the insights! It indeed depends on the scaling. While zooming in/out, sometimes it randomly gives a correct output and sometimes a wrong output. The funny thing is that, at 100% zoom, the output is still wrong. (Which led me to wonder whether Codepen is doing scaling by itself too.) So I guess I'll just ignore this and hope Chrome users don't notice the funny edge. – Hildo Bijl Jun 14 '17 at 06:36

0 Answers0