search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.87k stars 1.82k forks source link

`Radio Tile Group` outline disappear problem #6306

Closed ZhuoyueLyu closed 3 years ago

ZhuoyueLyu commented 4 years ago

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
image Chrome image

Safari
image Chrome image

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 commented 4 years ago

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

ZhuoyueLyu commented 4 years ago

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 😅 )

Screen Shot 2020-06-18 at 11 42 27 AM Screen Shot 2020-06-18 at 11 42 25 AM Screen Shot 2020-06-18 at 11 42 22 AM
joshblack commented 4 years ago

@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 commented 4 years ago

@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 commented 3 years ago

@ZhuoyueLyu Thank you for your patience on this! You should see a fix here: https://github.com/carbon-design-system/carbon/pull/8258