<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Browser zoom inconsistently scales box model properties"
   href="https://bugs.webkit.org/show_bug.cgi?id=152142">152142</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>Browser zoom inconsistently scales box model properties
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>WebKit Nightly Build
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>Layout and Rendering
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>ben&#64;answerrocket.com
          </td>
        </tr>

        <tr>
          <th>CC</th>
          <td>simon.fraser&#64;apple.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Given a &lt;div&gt; containing &lt;spans&gt;, and given the CSS fragment

div &gt; span {
  border: 1px solid blue;
  margin: -1px;
}

when zoomed to some level other than an integer multiple of 100% (200%, 300%) the width of the border does not appear to equal the width of the margin.

Specifically, in Chrome 48 (current Chrome beta at time of writing), at 110% zoom, the computed border-width is shown in devtools as 0.909px, as if the browser has divided out the zoom level from the border.

The computed border width continues to decrease until 200% zoom, at which point it reports 1px again.

It's not clear to me whether this is a Chromium issue or a WebKit issue (I'm not familiar enough with either to know where one ends and the other begins), so I apologize if I'm barking up the wrong tree. I see this same behavior in both Safari (El Capitan) and Firefox, though Firefox reports 1px as the computed value regardless of zoom level.

I assume the intent here is to avoid non-integer border width for a solid border, but it breaks my layout and results in layouts that are in conflict with my (albeit naive) knowledge of the CSS box model.

Thanks for your time. I did try to find duplicates, but nothing I saw addressed this specifically--apologies if I missed one.

Cheers,

--Ben Mosher</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>