In our GIS web-application we use leaflet with the superb sidebar-v2 component to have some fold-out pages and command-icons in one place. But we suddenly encountered a bug when users/developers started upgrading to chrome 62. Very weird rendering bug. The icons suddenly were no longer centered inside the lu > li items but only the top half was visible. As if the icons were shifted down.
To get a little more technical: the sidebar is a bar filled with icons and these are actually an unordered list, and to center the icons inside the foreseen space we have something like, in short:
ul > li { height: 40px; }
ul > li > a {
height: 100%;
line-height: 40px;
}
which is all in itself a pretty standard way to align "text" (icons in our case) vertically. So why is it broken now? Chrome 62 seems to add some kind of padding/margin, except setting those explicitly has not effect.
If I removed the line-height the icons came into view correctly, but they were not centered in the foreseen space anymore.
Luckily, I was not the first to encounter this issue and this bug was also already reported to google as well and a fix is underwayUnfortunately (?) the bug was not severe enough to actually halt going live of version 62 and or but it will be fixed in 63.
Luckily fixing the layout is quite simple, just add
ul > li {
list-style-type: none;
}
and then it renders correctly over all platforms again.
So to recap: if your unordered lists have hidden overflows and are suddenly broken in chrome 62 this might help you as well.
Comments
Add comment