CSS Hover Bug in Chrome

HTML-CSS
#1

Hey there,

I’m currently working on my portfolio page. When you hover over the social media buttons on the bottom, there are some white squares appearing on them. The same is happening in the navigation bar when you hover over it for some time. I’m working on the project in chrome, if i open the file in Safari this problem doesn’t show up. But in Safari the smooth scroll function doesn’t work. Does anyone know how to solve the two problems? You can check out the code and page here: https://codepen.io/MatthiasGabriel108/full/eMYXVR/

Thanks a lot!
Matthias

#2

There are many issues so I’ll try to address some the ones I can spot immediately. I’m not able to reproduce the hovering/whiet-square issue, but I suspect that it may be related to the fact that you are applying overflow-y: scroll to ALL elements:

* {
/* ... */
overflow-y: scroll;
}

If the white boxes that you are seeing are not actually all the scroll bars that I’m seeing, perhaps take a screen shot or be a bit more specific about those white squares.

As for smooth scroll—it’s not support on Safari. Have a look at the documentation for scroll-behaviour and scroll to the bottom for browser compatibility.

I noticed that you are also using unordered lists for at least a couple of things (navigation and social media icons), and you are also using flexbox to position them. I personally think that for one-dimensional content it’s rather unnecessary and adds complexity to the otherwise simple and elegant flexbox positioning. For example, I’m seeing bullet points next to the social media icons in Firefox.

I hope that helps and good luck!

1 Like
#3

thanks a lot, i will look into it tomorrow. Do you have any suggestions/tipps what to change besides these things you have already mentioned? I am very grateful for advice as I’m a complete beginner :slight_smile:

#4

The only other thing that’s poking at me would be the use of the id selector, #. There are many arguments as to why you should avoid it and style using the class selector, ., instead.

I personally like the aesthetics of your portfolio (with the exception that the brown text could perhaps be darker and/or be highlighted using a subtle, maybe even non-grey scale, text-shadow in some parts, such as in the header). In any case, for the technical parts, I suggest looking at one of the projects by @camper, such as this one and have a look at the list of things to see if there is anything you can learn from it. :smile:

I hope that helps!

#5

Great, actually the main problem was the scroll function on all elements. When i deleted it, those white squares didn’t show up anymore, so probably the scrolling bars were displayed as those squares. I used jQuery for the scrolling effect, now everything works perfectly fine. I also changed the unordered list. Thanks again!