Home>

Scrolling will cause each element to sway vertically.
Even if I erased each element one by one, there was no shaking.
The page is here.
https://unagi-ryousin.com/
To check the phenomenon, scroll down and then immediately return to the top to shake the page vertically. In particular, it is easy to understand by scrolling the part of the image where the products are lined up below "Popular products with a lot of depth". Only the TOP page is generated.

It may not be directly related, but
Chrome DevTools has the following warning:
Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type".
There is a page with the same content below, but I can't find the item by searching with icons.

Instead of just pointing to the URL of the page, include the (minimal) code that reproduces the problem directly in your question.

cubick2022-02-13 23:25:25

@cubick Thank you. Since the cause has not been identified, it is difficult to give the relevant code. To check the phenomenon, scroll down and then immediately return to the top to shake the page vertically. It is especially easy to understand if you scroll the part of the image around where the products are lined up.

Macc2022-02-13 23:25:25

Why don't you try debugging by narrowing down the code until the phenomenon is reproduced? First of all, how about reducing DOM elements from full full HTML, CSS and javascript, or excluding Javascript that seems to be unrelated, and aiming to create a minimal source that does not occur when the behavior is deleted. Is not it?

keitaro_so2022-02-13 23:25:25

The source code is too long to read, but when the header is off, isn't the value of the position property no longer absolute or fixed? If so, each time you scroll to switch the header display, the entire document will shift by the height of the header.

supa2022-02-13 23:25:25

Thank you, @keitaro_so. I understand what you mean. When I reduced the DOM elements, I found that the header was probably influential. thank you.

Macc2022-02-13 23:25:25