https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
On desktop devices, the devicePixel ratio gives us the level of zoom that the user specified using ctrl +/- and or by selecting a zoom level from the menu.
When window.devicePixelRatio is not an integer (e.g., 1.25), the styles of some Ext JS components may render incorrectly.
Demo:
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()
});
Online editor:
https://fiddle.sencha.com/#view/editor&fiddle/3qtb
Zoom 125% (the bug appears)
https://fiddle.sencha.com/#view/editor&fiddle/3qtb
1
The problem appears on locked grids.
A starting point to solve this is this CSS
.x-grid-scroll-container,
.x-grid-item,
.x-grid-view {
background: transparent!important;
}
.x-grid-scrollbar-clipper {
border: 0 none!important;
}
Sencha currently adds the border to different items, so that (best case) it works.
But in some scenarios it does not work and the grid-view overlays the main border, while the calculation for the right grid is off 1 px.
Test my settings and try to find out what works for you.
You might want to go with the border-left on the .x-grid-scrollbar-clipper, but then you have to remove the border-right on other items.
Hope that helps. For your testing I added the css to your fiddle. Just remove the app.css to get back to the problematic part.