If you see the following artifacts, this article might be able to help you:
How to fix this?
The root cause is a wrong z-index of our overlay compared to other elements on the website. The overlay itself will layer it correctly into the z-index, but as our components like
<retraced-cards/> are placed within other elements of your webshop, they must get the correct layering as otherwise you will get above visual problems.
First, you have to find the exact element which causes the layering problem. This is different from webshop to webshop and is not a problem of the retraced overlay. Here are typical stylings which can break layering:
css-transform in parent component. A css transform will open up a new canvas and this way the z-ordering is recreated within that canvas. This canvas might be overlayered by other elements on your page. See explanations in stack overflow: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children/15256339#15256339 and https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform/15251226#15251226
Solution: Do not use css-transform or in any other parent component where our component is placed.
z-index clashing of siblings. If two components have the same z-index, but on is deeper nested, then the less-nested component is prioritized.
Solution: Clearly state z-index in your DOM.
These two are the most common pitfalls.
But other plugins work out of the box
All the other plugins out there which work out of the box are delaying your page speed usually by 150ms or more because they are modifiying your original page on loading. Whereas we are expanding on parallel load.
I still have the problem!
If the problem with the placement persist, do reach out to us. We can surely help you to figure out the styling problem.