CODEWITHSUNDEEP
cssgoogle-chrome
Ray
Ray

Reputation: 4929

Chrome: mouse hover on some elements causes vertical scrollbar to jump to the top

I have an application that contains a vertical scrollbar on the page because one of my two lists on the page can be very long and I want the user to scroll up or down. What I found was that sometimes the user just hovers the mouse over other elements on the page and suddenly if the scroll bar was at the bottom, Chrome causes the scrollbar to jump to the top.

Has anyone seen this behavior in Chrome? It works fine with the other browsers. I tried changing a bottom padding on one of my header div elements:

padding: 0.75em 2em 1.75em 2em;

and it seems to have reduced the problem, but the problem still occurs occasionally. One thing I do notice is that it occurs when one of my lists are too long.

Upvotes: 4

Views: 2467

Answers (3)

Nathan
Nathan

Reputation: 1

Sometimes the "non-hover" CSS has incomplete information; the "hover" CSS specifies this extra information. Make sure all info (like "top:") specified in the "hover" CSS has an entry in the "non-hover" also.

Upvotes: 0

Jooooooooohn
Jooooooooohn

Reputation: 137

I see you've already solved your problem but I just bumped into a very similar problem where Chrome (and only Chrome) would scroll a list to the top when the first element in the list was hovered. I had no box-shadow but instead had a list with some padding:

.list {
    padding: 0 10px;
}

And when a list item was hovered, a negative margin and some padding was added (for a reason I can't really remember):

.list-item:hover {
    margin: 0 -10px;
    padding: 0 10px;
    background-color: lightblue;
}

This didn't change the size of the list, at least not visually. But after seeing your question and answer, I changed it so that the list did not have any padding and instead all the padding and margin was on the list items. Problem solved!

Upvotes: 0

Ray
Ray

Reputation: 4929

It turned out to be a CSS problem. Whenever, the element was hovered, the CSS added a box-shadow on the element using the :hover selector. This caused the border to increase and caused the list to change size. When I removed the box-shadow, the problem went away. It was not a Chrome problem.

Upvotes: 2

Related Questions