Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="scrolled">Scrolled</div>
  <div id="transformed">Transformed</div>
  <p>
    Explanation:
  </p>
  <p>
    Both of the above boxes are positioned one half
    physical pixel away from the top edge of the page.
  </p>
  <p>
    The left box is positioned 1 full physical pixel
    away, then the page is scrolled by a half pixel.
    If fractional-scroll-offsets is enabled in Chrome,
    the scroll offset will actually be half the physical
    pixel.
  </p>
  <p>
    The right box is fixed and positioned one half pixel
    from the viewport top.
  </p>
  <p>
    Observe the top edge of each box (you may need a
    screen magnifier or to take a screenshot and observe
    zoomed in using an image viewer). You should see
    that the right box paints using blending so that the
    top edge of the box is purple. The left box, even
    though it is positioned in the same place, does not
    paint using subpixel precision so it is snapped to
    the first row of pixels.
  </p>
  <p>
    Here's a zoomed picture of what you should see
  </p>
  <img src="http://bokand.github.io/zoomed.png">
  
</body>
</html>
 
html, body {
  background-color: red;
  width: 100%;
  height: 120%;
  margin: 0;
}
​
:root {
  --half-pixel: 0.5px;
}
​
div {
  color: white;
  padding-top: 5px;
}
​
img {
  border: 2px solid black;
  width: 80%;
  margin-left: 10%;
}
​
p {
  color: white;
}
​
#scrolled {
  margin-top: calc(2 * var(--half-pixel));
  background-color: blue;
  width: 49.5%;
  height: 50px;
}
​
#transformed {
  position: fixed;
  right: 0;
  background-color: blue;
  width: 49.5%;
  height: 50px;
  top: 0;
  transform: translateY(var(--half-pixel));
}
​
​
 
onload = () => {
  const html = document.documentElement;
  const halfPixel = 0.5 /  window.devicePixelRatio;
  html.style.setProperty("--half-pixel", halfPixel + "px");
  window.scrollTo(0, halfPixel);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bokandpro
0viewers