#container contains two divs: #left and #right. Both of their background colors are determined by window width: when the window is greater than 50ems wide, their backgrounds are red; when the window is less than 50ems wide, green.
However, this is implemented via different mechanisms for #left and for #right. #left's background color is set by a window resize event-handler. #right's background color is set by a media-query.
Even though this is conducted via different mechanisms, the breakpoint for both is the same: 50ems, meaning theoretically, #left is green if and only if #right is green (and, therefore: #left is red if and only if #right is red).
This works on Chrome at any magnification. This works on Firefox at any magnification. However, this only works in Safari at magnification 100%. When you stray from 100%, there are cases near the 50em breakpoint for which one div is red and the other green. In other words, the media query and the window resize handler are detecting different em widths.
I am trying to make my site compatible with any broswer, at any magnification, but this Safari thing is killing me. How can I achieve the "#left green if and only #right green" result for those viewing the site in Safari at a magnification of 90% or 110%?
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#container{
height: 100px;
width: 100px;
}
.div{
float: left;
width: 50%;
background: green;
}
@media (min-width: 50em){
#right{ background: red;}
}
</style>
</head>
<body>
<div id="container">
<div id="left" class="div"> Left </div>
<div id="right" class="div"> Right </div>
</div>
<script type="text/javascript">
$(window).on("resize", function() {
var width = $(window).width() / parseFloat($("body").css("font-size"));
if( width < 50) document.getElementById("left").style.background = "green";
else document.getElementById("left").style.background = "red";
}).resize();
</script>
</body>
</html>
