The issue is when we zoom a little bit on browser the extra space shown in button, here is a solution that worked for me:
I use border: thin solid rgb(37, 101, 135); rather then border: 1px solid rgb(37, 101, 135); on button id #filter
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I’ve been struggling with this piece of code, I can’t remove the white space that appears in the button(sometimes is on the top, and sometimes in the bottom) here is the css code that isnt working
#filter {
position: relative;
overflow: hidden;
padding: 10px 15px;
border-radius: 5px;
outline: none;
border: 1px solid rgb(37, 101, 135);
background-color: transparent;
transform: scale(4) translate(50%, 50%);
}
#filter::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: skyblue;
}<button id="filter">Filter: Off</button>Thanks in advance.
Can you please share image of button having white line, sorry but i am unable to see it. or else please remove background color property from your css
@jualahmed what do you mean with ‘remote’? did you mean ‘remove’? i did remove it, and nothings seems to be fixed =(
sorry for mistake i it’;s remove. i said remote background-color: transparent; css line
@jualahmed – You can edit your comment
strange, mine : Version 80.0.3987.116 (Build officiel) (64 bits) , i do not see any issue
thank you for the welcome, but I’m talking about the white line, idk if you can see it in the fiddle, but here goes an image:
@sodero472 i didnt see it in the fiddle but you can try setting
@Awais nice find, I indeed see the issue when the window is zoomed in.
@Awais thank you sm, your code works as it should, i will update chrome anyways