Position calculating bug on Chrome about smoothscroll

[jeremenichelli]

This is one of the edge cases where the scripts has a hard time trying to find if the element you want to scroll into view is inside a scrollable element or is the body itself.

By looking at the code the #nesting-parent has a position: absolute and the nesting childs overflow: scroll which in Chrome might cause a difference between the height and the scrollHeight property of the parent, which makes the script think that #nesting-parent is a scrollable element.

If you remove the position: absolute from #nesting-parent the script will work well. Since this is not a real case scenario it's hard to find where the script is failing exactly.

We are aware that this is probably the weakest part of the polyfill, but it's hard to infere how a fix could solve this situation since the example is a little messy.

Thanks for reporting.

[KitaitiMakoto]

Yes, if I remove position: absolute, Chrome works fine.
But it is required in my real use case(sorry, I cannot publish it for now). So, I'm using this library with patch.

I realize it's hard to dig deeper and fix it so I'm not intended to hurry you. I raised this issue just for your information. How about to write about this issue in README till it's fixed?

[jeremenichelli]

Sounds good, but I feel that more insight is needed to be more accurate on what is exactly what the script is missing.

For now, let's leave this issue open since it's the purpose of the issues tab indeed. But please, let me know when your project is live to debug more deeply and be able to determinate the problem with better precision.

[KitaitiMakoto]

For now, let's leave this issue open since it's the purpose of the issues tab indeed.

Okay.

But please, let me know when your project is live to debug more deeply and be able to determinate the problem with better precision.

Of course okay although actually I'm patching this lib in my project. And more notice on this issue board will be required at that time because the site is written in Japanese. Its HTML structure and CSS might help you to research.

I respect your effort to solve problems. Thank you very much!

[jeremenichelli]

No problem @KitaitiMakoto, keep us in the loop so we can investigate further.

[KitaitiMakoto]

Hi,
Our site was published:
https://lp.koyamachuya.com/uchurinchu/

It uses smoothscroll lib with patch. The patch is hosted on my nonesting branch:
https://github.com/KitaitiMakoto/smoothscroll/tree/nonesting

Here is site description:
At first, when assets are loaded, a button to continue appears.

After click the button(it uses your smoothscroll but patch is not required here),

[KitaitiMakoto]

(Sorry, I pushed comment button by mistake. will continue description...)

After you click the button(it uses your smoothscroll but patch is not required here), some contents and four pink dots on the left appear.

This smoothscroll lib is used for the dots with patch. If the patch is not applied, they don't work well on Chrome.

Is this description enough? Because I know my English is not good, please feel free to ask questions to clear things. Thanks!

[jeremenichelli]

Hi @KitaitiMakoto, the explanation is more than clear.

Sorry to ask for one more thing, but can you summit a pull request with the exact change you needed to do to get it working?

[KitaitiMakoto]

@jeremenichelli
OK, done here: #40

[jeremenichelli]

Excellent, thanks @KitaitiMakoto. As soon as I have time I'll try to replicate the bug and see If I can come with a solution to it.

[KitaitiMakoto]

Thank you!

[jeremenichelli]

This issue should be solved now that #41 was merged. Closing.

[KitaitiMakoto]

I confirmed this fixed, great! Thank you, @jeremenichelli !

[jeremenichelli]

Thanks you for reporting and helping find the issue @KitaitiMakoto 🎉