how can I remove gray outline that insists on appearing on my logo when refreshing pages?-CodePudding

(Update) Problem 50% solved! It seems it comes from the PNG file. Once I changed it for a SVG file, the "glitch" does not appear anymore. BUT, now I have another problem (lol).

How do I get this SVG file to respond to my code as the PNG did before? This is the code that I used to make my PNG shrink when scrolling. But it does not work with the SVG (even if I named it as ".logo" too).

Anyone knows what I have to change in the CSS code to make the SVG respond to it, please? :)

.logo img {
max-width: 110px;
height: auto;
transition: all 1s ease;
}


.elementor-sticky--effects .logo img {
max-width: 80px;
height: auto;
}

I guess it's easier to understand my problem with images:

This is the homepage (image 1). When I refresh it or if I go to the other pages, an annoying gray outline contours the logo (image2), like a glance, and then disappears. Do you guys know how to remove this thing?

image1 image2

I added an additional CSS code on elementor pro so it started happening....This is the code:

selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.7)!important
}

selector{
transition: background-color 1s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}

selector > .elementor-container{
transition: min-height 1s ease !important;
}

.logo img {
max-width: 110px;
height: auto;
transition: all 1s ease;
}

}

.elementor-sticky--effects .logo img {
max-width: 90px;
height: auto;
}

CodePudding user response：

.logo img {
max-width: 110px;
height: auto;
transition: all 1s ease;
border: transparent;
}

Try border transparent

CodePudding user response：

Try add 0px in border like this

.logo img {
max-width: 110px;
height: auto;
transition: all 1s ease;
border: 0px;
}

hope this'll help