Question

目标：在屏幕上绘制一个固定网格，以便与jQuery的可拖动快照选项一起使用，作为表单设计器的一部分。允许用户放大和缩小，同时仍保持25x25像素网格。

问题：网格绘制的垂直线宽度为1px，水平线宽度为1px。在Chrome正常放大时，DIV显示正常，但是，在不同的缩放级别，某些DIV根本不会显示。注意到90％变焦和75％变焦的问题，但在其他变焦中也出现了问题。如果放大过去100％似乎很好。我无法在IE或MS Edge中重新产生问题。

我所知道的：我找了一会儿解决方案。基于该研究并检查计算出的样式，我认为问题是Chrome在缩放时正在计算新的宽度/高度，如果计算结果小于1，则不会显示为1px是浏览器将显示的最小单位。我玩弄了添加边框但似乎放弃了我的定位。

这是我的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();
})

这是我的CSS：

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

最后一个jsFiddle来证明这个问题。在我的实际场景中，我可以看到90％变焦的问题，但在jsFiddle中我看到问题直到75％缩放。

https://jsfiddle.net/r5xjsf6f/

更新：

所以根据一条评论建议我检测到缩放并相应地修改css，我开始深入研究。我发现我可以分析计算出的样式，如果它小于1px，我可以将内联样式增加到2px然后它会显示。我真的不喜欢这个，但我想尝试一下。奇怪的是在测试中我发现在某些缩放级别，计算的样式是1px并且它们仍然没有显示。关于这一部分的任何想法还是更好的解决方案？

以下是我添加的代码：

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");
        }
    })
}

这是一个更新的jsFiddle：

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

更新：

由于我无法为此找到解决方案，我们最终只将网格线宽度/高度更改为2px而不是1px。这似乎允许线条正确显示，直到约33％的缩放级别。在它以更逼真的缩放级别打破之前。这不是一个完整的解决方案，但更多的是我们的应用程序的合理性。如果他们在那里我欢迎更好的解决方案，但我们现在要用这个来投入生产。

Answer 1

我实际上是在尝试使用相同的代码完成类似的操作，但我遇到了同样的问题。我设法通过将宽度和高度设置为零并在垂直线上放置边框左边和在水平线上放置边框底部来解决问题，如下所示：

$('<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);
  }

以下是fiddle

的更新版本

如何修复Google Chrome和1px宽度/高度DIV的缩放问题？

1 个答案: