safari rounding down on subpixel calculations

Question

i have a container that takes up 829px on a row, and has a background-image of the same size.

i have a div within that container that calculates its width based on t

Answer 1

If you can't do float: right on the last element in the 'row' because of background colors being revealed, etc, you could use the following trick to really hackily hide the background (note it's SASS code):

.safari .parent_element { // CHANGE
  position: relative;

  &:after {
    content: ''
    position: absolute;
    height: 100%;
    width: 3px;
    top: 0;
    left: calc(100% - 2px); // Or sometimes 'right: 2px;' will work
    background-color: $pageBackground; // Change
  }
}

The safari class is added to using a Modernizr test:

Modernizr.addTest('safari', function() {
  var uagent = navigator.userAgent.toLowerCase();

  return /safari/.test(uagent) && !/chrome/.test(uagent);
});

The only reason I've ever used this test is to overcome Safari's subpixel rendering with a background gradient running between grid items that have a percentage width. I'm not advocating for it's widespread use! However, it's an effective last resort.