How to fix zoom issues with Google Chrome and 1px Width/Height DIVs?

Goal: Draw a fixed grid on the screen to use with jQuery's draggable snap option as part of a form designer. Allow user to zoom in and out while still maintaining the 25x25 px grid.

Problem: The grid is drawn with a 1px width DIV for vertical lines and a 1px height DIV for horizontal lines. At normal zoom in Chrome the DIVs display fine, however, at varying zoom levels some of the DIVs will not display at all. The problem was noted with 90% zoom and 75% zoom but also occurred in others. If zooming in past 100% it seems fine. I couldn't re-produce the problem in IE or MS Edge.

What I know: I looked around for a while for a solution. Based on that research and inspecting the computed styling I believe the problem is that Chrome is calculating a new width/height when zoomed and if the calculation result is less than 1 it will not display as 1px is the smallest unit the browser will display. I toyed around with adding a border but that seems to throw off my positioning.

Here is my javaScript:

$(document).ready(function(){
var i,
    sel = $('#myDIV'),
    size = 25,
    height = sel.height(),
    width = sel.width(),
    ratioW = Math.floor(width / size),
    ratioH = Math.floor(height / size);
for (i = 0; i <= ratioW; i++) { // vertical grid lines
    $('<div />').css({
        'top': 0,
        'left': i * size,
        'width': 1,
        'height': height
    })
        .addClass('gridlines')
        .appendTo(sel);
}

for (i = 0; i <= ratioH; i++) { // horizontal grid lines
    $('<div />').css({
        'top': i * size,
        'left': 0,
        'width': width,
        'height': 1
    })
        .addClass('gridlines')
        .appendTo(sel);
}
$('.gridlines').show();
})

Here is my CSS:

.gridlines {
display: none;
position:absolute;
background-color:#ccc;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

And finally a jsFiddle to demonstrate the issue. In my actual scenario I can see the problem at 90% zoom but in the jsFiddle I don't see the problem until 75% zoom.

https://jsfiddle.net/r5xjsf6f/

UPDATE:

So based on a comment suggesting that I detect the zoom and modify the css accordingly I started digging into that. I found that I could analyze the computed style and if it was less than 1px I could increase the inline style to 2px and then it would show. I don't really like this but I wanted to try something. The odd thing is in testing I found that at some zoom levels the computed style was 1px and they still didn't show. Any ideas on that part of it or a better solution?

Here is the code I added:

if(!!window.chrome){
    $(".ghorizontal").each(function(){
        if($(this).height()<1){
            $(this).css("height","2px");
        }
    })
    $(".gvertical").each(function(){
        if($(this).width()<1){
            $(this).css("width","2px");
        }
    })
}

Here is an updated jsFiddle:

https://jsfiddle.net/r5xjsf6f/1/

UPDATE:

Since I wasn't able to find a solution for this we ended up just changing our grid lines width/height to 2px instead of 1px. This seems to allow the lines to display correctly until about 33% zoom level. Before it was breaking at more realistic zoom levels. This isn't a full solution but is more in the realm of reasonability for our application. I welcome better solutions if they are out there but we are gonna roll into production with this for now.

Answers


I am actually trying to accomplish something similar with the same code and I ran into the same exact problem. I managed to fix the issue by setting the width and height to zero and putting a border-left on the vertical lines and a border bottom on the horizontal lines like so:

$('<div />').css({
        'top': 0,
        'left': i * size,
        'width': 0,
        'border-left': '1px solid #ccc',
        'height': height
      })
      .addClass('gridlines')
      .appendTo(sel);
  }

  for (i = 0; i <= ratioH; i++) { // horizontal grid lines
    $('<div />').css({
        'top': i * size,
        'left': 0,
        'width': width,
        'border-top': '1px solid #ccc',
        'height': 0
      })
      .addClass('gridlines')
      .appendTo(sel);
  }

Here is an updated version of your fiddle


Need Your Help

android: How to make a tab flip like android market?

android tabs widget fragment

i wanna rewrite my app to fragment api, TabHost is deprecated so i've found ViewPager, but how can i make a tabbar like android market? (android market use viewpager and a bar). Superuser 3 use thi...

groovy Object and primitive confusion

groovy

Here's a part of (groovy) class that stores some data in Mongodb: