CODEWITHSUNDEEP
htmlcssgoogle-chrome
joem
joem

Reputation: 403

is there a workaround for subpixel borders with full sized inner divs in chrome 61?

EDIT: It has been verified that it is a bug in 61 that they will fix before 62 goes stable https://bugs.chromium.org/p/chromium/issues/detail?id=763402

With the latest chrome update I have seen some of my subpixel borders go missing on two sides. Which sides they are is inconsistent. I have boiled the issue down to this 

<pre>
legend:
    pink: 1px border inner uses 100px//no problem
    salmon: .5px border inner uses 99% //no problem
    orange: .5px border inner uses 99px //no problem
    blue: .5px border inner uses 100% //missing borders consistant sides
    green: .5px border inner uses 100px //missing borders consistant sides
</pre>

<div style="border:solid 1px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightpink"> </div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:99%; height:99%; background:salmon"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:99px; height:99px; background:orange"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100%; height:100%; background:lightblue"></div>
</div>


<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightgreen"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightgreen"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightgreen"></div>
</div>

jsfiddle https://jsfiddle.net/arrowplum/qmvx8obn/

Does anyone see where I may be doing something incorrect? If not, is there a workaround?

Note that these examples are fine in Chrome 60, safari and firefox

Here is a screenshot if you are fiddle allergic: subpixel screenshot

EDIT: @brian17han added a workaround that does work for chrome but then breaks safari and firefox https://jsfiddle.net/arrowplum/qt0m7f2p/

brian17than fix on safari

EDIT2: modifying the padding to .1px then works for safari, chrome, and firefox with the exception of firefox on retina displays which shows a half pixel space between the inner and outer. Firefox retina

Upvotes: 2

Views: 1208

Answers (1)

brian17han
brian17han

Reputation: 1279

The reason Chrome 61 behaves differently than the older version is unclear to me.

However, here is a quick solution. You can add padding to your container and set the padding to the same size as your border-width. If you want your container's width and height to be 100px with the border, you will need to set your container to be box-sizing: border-box;. Otherwise, your container size will be 100px + border-width.

EDITED: I added another solution which uses box-shadow: inset to simulate the border. 

div.padding-container {
  border: solid .5px black;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  padding: .5px;
}

div.padding-container div.inner {
  width: 100%;
  height: 100%;
  background: lightblue;
}

div.with-inner-border {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: lightyellow;
  
  padding: 1px;
  -webkit-box-shadow: inset 0px 0px 0px 1px black;
  -moz-box-shadow: inset 0px 0px 0px 1px black;
  box-shadow: inset 0px 0px 0px 1px black;
}
<div class="padding-container">
  <div class="inner"></div>
</div>
<br/>
<div class="with-inner-border">
<div><p>hdafsljkdfs jklasdf jl kads  jlk afsd jklfsad l jkfdsa ljkas</p></div>
</div>

Upvotes: 1

Related Questions