Single pixel CSS error?

[tyggis]

In my previous question, CSS Hardware Accelerated Width, I mentioned that I was creating a Phonegap app that includes a feature that will allow you to change the size of a two column layout by moving the middle divider.I am getting this to work, but I am having some CSS positioning problems. These problems are usually off by one pixel, but I'm sure are just a result of my math. Basically, the two column layout is normally set so that each side is even. Then, if you move the slider, it will change the left and right values of the columns to either increase or decrease their widths. The resize icon is positioned in between these two columns, and moves with them as their widths change.The problem, however, is that when you rotate the device, the middle divider changes its positioning by a few pixels. To replicate the problem, you can either:Open pageRotate appRotate app back to original positionOr:Open AppMove sliderRotate appRotate app back to original positionRotate appIn each case, the middle divider will be off by a few number of pixels, causing it to not align properly with the dividing line.The JS that runs most of this looks like this:$(window).on('orientationchange', function (e) { var page = $("#columnContainer").width(); var totalWidth = $("#leftColumn").width() + $("#rightColumn").width() + 2; var left = $("#leftColumn").width(); var test = page - ((parseInt($("#leftColumn").css("right")) * page) / 100); $("#columnResizeIcon").css({ "-webkit-transform": "translate3d(" + (left) + "px, 0, 0)", "left": "auto", }); if (totalWidth > page) { $("#leftColumn").css("margin-right", "2px"); } else if (totalWidth < page) { $("#leftColumn").css("margin-right", "1px"); } if ($("#leftColumn").width() < 100) { $("#leftColumn").css({ "right": 100 - ((100 / page) * 100) + "%", "margin-right": "1px" }); $("#rightColumn").css({ "left": (100 / page) * 100 + "%", }); $("#columnResizeIcon").css({ "-webkit-transform": "translate3d(100px, 0, 0)", }); } if ($("#rightColumn").width() < 100) { $("#leftColumn").css({ "right": (100 / page) * 100 + "%", "margin-right": "1px" }); $("#rightColumn").css({ "left": 100 - ((100 / page) * 100) + "%", }); $("#columnResizeIcon").css({ "-webkit-transform": "translate3d(" + (page - 100) + "px, 0, 0)", }); }});$("div").on("touchmove", "#columnResizeIcon", function (e) { e.preventDefault(); var page = $("#columnContainer").width(); var left = e.originalEvent.touches[0].pageX; var right = page - left; if (left > 100 && left < page - 100) { $("#leftColumn").css({ "right": ((right) / page) * 100 + "%", "margin-right": "1px", }); $("#rightColumn").css({ "left": ((left) / page) * 100 + "%", "margin-left": "1px", }); $("#columnResizeIcon").css({ "-webkit-transform": "translate3d(" + left + "px" + ", 0, 0)", "left": "auto", }); } else {}});CSS:body{ background-color:#000;}#columnContainer{ position: absolute; bottom:0; top:0; right:0; left:0; background-color:#000;}#leftColumn{ position: absolute; top:0; left:0; right:50%; bottom:0; -webkit-overflow-scrolling: touch; z-index: 1; margin-right: 1px;}#rightColumn{ position: absolute; top:0; left:50%; right:0; bottom:0; -webkit-overflow-scrolling: touch; z-index: 1; margin-left: 1px;}.header{ position: absolute; left:0; right:0; height:33px; z-index: 5; background: -webkit-linear-gradient(top, #f4f5f7 0%,#a7abb7 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090, 3px 0 2px rgba(0,0,0,.3); border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 17px; font-family: Helvetica; font-weight: bold; letter-spacing: .2px; text-align: center; padding-top:9px; color:#71787F; text-shadow: 0 1px 0 #E3E5E9; word-break: break-all;}.content{ position: absolute; left:0; right: 0; top:42px; bottom: 0;}#leftColumn .content{ background-color:#F5F5F5;}#rightColumn .content{ background-color:#fff;}#columnResize{ position: absolute; width:2px; top:0; bottom: 0; left:50%; margin-left:-1px; background-color:#000; z-index: 2; display: none;}#columnResizeIcon{ position: absolute; z-index: 3; width:10px; height:30px; top:50%; bottom:50%; margin-top:-15px; left:50%; margin-left:-7px; border-left:2px solid #000; border-right:2px solid #000;}#leftColumn,#rightColumn { -webkit-transform: translate3d(0,0,0);}HTML:<div id="columnContainer"> <div id="columnResizeIcon"></div> <div id="leftColumn"> <div class="header">Left Header</div> <div class="content"></div> </div> <div id="rightColumn"> <div class="header">Right Header</div> <div class="content"></div> </div></div>I would post a fiddle, but the code needs to be run from either the iOS simulator or an actual iOS device, and jsFiddle does not play well with Apple.