Radio Tile Group outline disappear problem

[ZhuoyueLyu]

Hi, I'm Zhuoyue from the IBM Watson Studio UI team and am currently working on developing UI for AutoAI.

The Radio Tile Group's outline disappears under 70% Zoom or smaller. This seems to be the bug for Chrome alone, in the safari everything is fine.

Safari

Chrome

Safari

Chrome

A temporary fix we are using is to add the following code inside the tilesContainer of the respective .scss, but this only partially solves the problem. If we zoom in 67% or less, we need an even smaller outline-offset to make sure the outline shows up correctly. But under smaller outline-offset, the 110% or more zoom in will looks weird. So I think this component should be updated for this situation. Thanks!

:global(.bx--tile--is-selected){
	outline-offset: -1.5px !important;
}

[joshblack]

Hey @ZhuoyueLyu! 👋 Could you share your use-case for zooming out at 67% or lower?

[ZhuoyueLyu]

Hi, @joshblack Yeah, 67% is a little bit extreme, but currently, this bug will appear at 90% or lower. (Which is still pretty common, I guess? I'm just wondering if there is any once-all-for-all solution other then change the outline-offset 😅 )

[joshblack]

@ZhuoyueLyu yeah, it's definitely a hard one. It seems like when we go smaller than 100% that Chrome will change the outline width to 1.11111px due to sub-pixel rendering 😞 we can definitely look and see what our options are, most likely switching over to border or box-shadow.

[ZhuoyueLyu]

@joshblack Okay, I see...agreed. I've tried the border actually, but I notice the tile will move a little bit when we switch selection between two adjacent tiles. I guess it's because the border has a certain width, which pushes the adjacent tile in the opposite direction. I haven't tried the box-shadow, maybe it will work. 😅

[andreancardona]

@ZhuoyueLyu Thank you for your patience on this! You should see a fix here: #8258