Potential forced style layout about boomerang

[bluesmoon]

Line 861 doesn't update the DOM. It operates on an in-memory image object that isn't attached to the DOM. It's only used for srcsets.

[bakura10]

Thanks for the answer. I will do some more debugging then, because the more <picture> tag I add on the page, the more forced reflows attributed to the getBoundingClientRect appears in Chrome inspector tools. May be a side effect of another code. I will let you know if I find anything :)

[bluesmoon]

The getBoundingClientRect probably is causing a reflow, but it isn't being invalidated later. Are the picture elements visible when this happens?

[bakura10]

@bluesmoon , yes, all the picture element are inside a slideshow. For animation purpose, each slide is using visibility: hidden (so probably considered as "visible" as the space is allocated). Each slide contains a tag.

Chrome inspector reports me one reflow per slide. So with six slides, I get 6 reflows reported on the getBoundingClientRect in Boomerang, which quickly adds up, performance wise.

I will do further debugging on my end.

[bakura10]

For information if this may helped for debugging @bluesmoon , here is the store where I am facing this issue: https://prestige-theme-allure.myshopify.com/

You can see in the inspector tool a succession of recalculation and forced layout in quick succession in Boomerang code:

However, I found some code that may be not optimal in Shopify side as well, but I am having a hard time trying to find the root cause of this here.