如何使用Google Chrome和1px宽度/高度DIV修复缩放问题？ [英] How to fix zoom issues with Google Chrome and 1px Width/Height DIVs?
问题描述
问题：网格的垂直线条宽度为1px，DIV高度为1px水平线。在正常的Chrome浏览器中，DIV显示效果不错，但是，在不同的缩放级别下，某些DIV根本不会显示。问题出现在90％的变焦和75％的变焦，但也发生在其他人。如果放大100％看起来很好。我无法在IE或MS Edge中重新产生问题。
我知道：我想了解一下解决方案。根据研究和检查计算的样式，我认为问题在于Chrome在缩放时正在计算新的宽度/高度，如果计算结果小于1，则不会显示，因为1px是浏览器显示的最小单位。我玩弄了增加一个边框，但似乎摆脱了我的定位。
这是我的javaScript：
<$ $（$＃$）$（$＃$）$（$＃$）
height = sel.height（），
width = sel.width（），
ratioW = Math.floor（width / size），
ratioH = Math.floor（height / size）;
for（i = 0; i <= ratioW; i ++）{//垂直网格线
$（'< div />'）。css（{
'top'：0，
'left'：i * size，
'width'：1，
'height'：height
}）
.addClass （'gridlines'）
.appendTo（sel）;
}
（i = 0; i <= ratioH; i ++）{//水平网格线
$（'< div />'）。css（{$ b $'top'：i * size，
'left'：0，
'width'：width，
'height'：1
}）
.addClass（'gridlines'）
.appendTo（sel）;
}
$（'。gridlines'）。show（）;
}）
这是我的CSS：
.gridlines {
display：none;
位置：绝对;
background-color：#ccc;
不透明度：0.6;
filter：alpha（opacity = 60）; / *对于IE8和更早版本* /
}
最后一个jsFiddle来演示这个问题。在我的实际情况中，我可以在90％的缩放范围内看到问题，但在jsFiddle中，直到75％缩放后才看到问题。
https://jsfiddle.net/r5xjsf6f/
更新：
因此，根据评论建议我检测缩放并相应地修改CSS，我开始深入研究。我发现我可以分析计算的样式，如果它小于1px，我可以将内联样式增加到2px，然后显示。我不太喜欢这个，但我想尝试一些东西。奇怪的是，在测试中，我发现在某些缩放级别计算的样式为1px，但它们仍未显示。任何想法或者更好的解决方案？
以下是我添加的代码：
<$ p $如果（$ window.chrome）{
$（。ghorizontal）。each（function（）{
if（$（this）.height（）< code> ; 1）{
$（this）.css（height，2px）;
}
}）
$（。gvertical）。each （）{
if（$（this）.width（）< 1）{
$（this）.css（width，2px）;
}
}）
}
这是一个更新的jsFiddle：
https://jsfiddle.net/r5xjsf6f/1/ p>
UPDATE：
由于我无法找到解决方案，因此我们最终改变了网格线宽度/高度为2px而不是1px。这似乎允许线条正确显示，直到约33％的缩放级别。在它更加逼真的缩放级别之前。这不是一个完整的解决方案，但更适合我们的应用程序。我欢迎更好的解决方案，如果他们在那里，但我们现在要用这个方法进行生产。 用相同的代码来完成类似的事情，我遇到了同样的问题。我设法通过将宽度和高度设置为零，并将垂直线上的边框和水平线上的边框底部放在一起来解决此问题，如下所示：
$（'< div />'）。css（{
'top'：0，
'left'：i * size，
'width'：0，
'border-left'：'1px solid #ccc'，
'height'：height
}）
.addClass（'gridlines'）
.appendTo（sel）; （i = 0; i <= ratioH; i ++）{//水平网格线
$（'< div />'）.css的
}
（{
'top'：i * size，
'left'：0，
'width'：width，
'border-top'：'1px solid #ccc' ，
'height'：0
}）
.addClass（'gridlines'）
.appendTo（sel）;
}
以下是小提琴
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.
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
这篇关于如何使用Google Chrome和1px宽度/高度DIV修复缩放问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
