康威生命游戏开发中单元格div渲染尺寸与设置值不符问题

开发约翰·康威生命游戏项目，集成画面平移、缩放功能后，按下空格键运行程序时，渲染出的单元格实际尺寸和配置预期不符：已将单元格div设置为主网格尺寸的0.1%，实际渲染尺寸总是偏大或偏小，不符合设置值。

代码存在4个直接导致尺寸异常的问题：

• 单元格类.on使用position: fixed定位：该定位模式下的百分比宽高、偏移量全部相对于浏览器视口计算，而非父元素.main-grid，和预期的相对主网格计算尺寸的逻辑完全不符。
• 父元素.main-grid未建立定位上下文，即使修改单元格定位模式，没有父级定位约束时，偏移量计算会逐层向上查找直到根元素/视口，无法按主网格尺寸做比例计算。
• position: fixed定位的元素不会跟随父元素的CSS transform变换，而panzoom库正是通过transform实现平移、缩放效果，会直接导致单元格在缩放平移时错位、尺寸比例异常。
• 位置计算逻辑错误：若单元格宽高为主网格的0.1%，则每个单元格对应0.1%的网格跨度，原代码用坐标值/10计算百分比偏移，比例完全错误。

1. 调整CSS定位规则 #

.main-grid{
    width: 100vw;
    height: 100vw;  
    background-color: rgb(0, 0, 0);
    /* 新增：为子单元格建立相对定位上下文 */
    position: relative;
}

.on{
    /* 替换fixed为absolute，相对父级.main-grid定位 */
    position: absolute;
    height: 0.1%;
    width: 0.1%;
    background-color: white;
    /* 清除默认边距、盒模型规则影响尺寸计算 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. 修正单元格偏移计算 #

修改JS中单元格样式赋值逻辑，使用和单元格尺寸匹配的比例计算偏移：

// 原错误计算逻辑
// $('#'+i+'').css({ 'left': element[0]/10+'%', 'top': element[1]/10+'%' })
// 修正为匹配0.1%单元格尺寸的偏移计算
$('#'+i).css({ 
    'left': element[0] * 0.1 + '%', 
    'top': element[1] * 0.1 + '%' 
})

3. 可选优化 #

• 避免在定时器循环中反复清空、重建所有单元格DOM，复用已渲染的单元格更新状态即可，减少重排重绘提升性能。
• 单元格尺寸优先使用固定px单位，百分比计算在不同缩放比例下容易出现亚像素精度误差，固定px单位配合panzoom的transform缩放表现更稳定。

内容的提问来源于stack exchange，提问作者Lohith K.