BUG：当window.devicePixelRatio不是整数时（例如1.25），Ext JS组件的样式可能会渲染错误

Question

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

在桌面设备上，devicePixel 比率为我们提供了用户使用 ctrl +/- 和/或通过从菜单中选择缩放级别指定的缩放级别。

当

window.devicePixelRatio

不是整数（例如1.25）时，某些Ext JS组件的样式可能会错误渲染。

演示：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [
        { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
    ]
});
Ext.create('Ext.grid.Panel', {
    title: 'Styles have errors when the page non-integer scaling',
    columnLines: true,
    store: store,
    features: [{
      ftype: 'summary',
      dock: 'bottom',
    }],
    columns: [
        { xtype: 'rownumberer', width: 30, summaryType: 'count' },
        { text: 'Name',  dataIndex: 'name', width: 100, locked: true },
        { text: 'Email', dataIndex: 'email', width: 150 },
        { text: 'Phone', dataIndex: 'phone', width: 120 }
    ],
    height: 200,
    layout: 'fit',
    fullscreen: true,
    renderTo: Ext.getBody()
});

在线编辑器:

https://fiddle.sencha.com/#view/editor&fiddle/3qtb

缩放125%（出现bug）

https://fiddle.sencha.com/#view/editor&fiddle/3qtb

Answer 1

问题出现在锁定的网格上。

解决这个问题的起点是这个CSS

.x-grid-scroll-container,
.x-grid-item,
.x-grid-view {
    background: transparent!important;
}

.x-grid-scrollbar-clipper {
    border: 0 none!important;
}

Sencha 目前为不同的项目添加了边框，因此（最好的情况）它可以工作。

但在某些情况下它不起作用，网格视图覆盖主边框，而右侧网格的计算偏离 1 px。

测试我的设置并尝试找出适合您的设置。 您可能想要使用 .x-grid-scrollbar-clipper 上的左边框，但随后您必须删除其他项目上的右边框。

希望有帮助。为了进行测试，我将 css 添加到了您的小提琴中。只需删除 app.css 即可回到有问题的部分。