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

目标：在屏幕上绘制一个固定的网格，以便与jQuery的可拖动捕捉选项一起用作表单设计器的一部分。允许用户放大和缩小，同时仍然保持25x25像素网格。如何使用Google Chrome和1px宽度/高度DIV修复缩放问题？

问题：网格的垂直线条宽度为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/

UPDATE：

因此，基于评论暗示我检测变焦和修改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/

UPDATE：

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

来源

2015-11-16 David Poirier

那么，在Chrome中通过将CSS中的东西相乘来实现缩放，所以如果它们在1px以下，可能会消失。除了开始检测缩放事件，跟踪缩放级别以及基于JS改变一些CSS之外，您可以做的不多。 – Roope

有趣的建议。我不反对尝试它，但我不确定在哪里改变它。内联样式仍然是1px，使用$（“myGridline”）.css（“height”，“1px”）不会更改计算的样式。你知道如何改变事实后的计算风格。我也会做一些研究，只是不确定你是否有一个快速的想法。感谢您的帮助@Roope –

我的警告永远永远不会使用IE或Edge作为应用程序工作的参考。它在Firefox中做了什么？编辑：在Firefox和Chrome中测试，我看到类似的结果。目前无法在IE中测试。 – Rob

我实际上试图用相同的代码来完成类似的事情，并且遇到了同样的问题。我设法宽度和高度设置为零，并把解决这一问题的左边框上的垂直线条和边框底部的水平线条，像这样：

$('<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的更新版本

来源

2015-12-04 18:07:27 charlesDstacko

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

回答

相关问题