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 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 in any parent component where our component is placed.
z-index clashing of siblings. If two components have the same z-index, but one is more deeply nested, then the less-nested component is prioritized.
Solution: Clearly state z-index in your DOM.
These two are the most common pitfalls.
Why do other plugins work out of the box?
Our components render in their own Shadow DOM. This keeps them style-isolated: your page’s CSS doesn’t change how our components look, and our CSS doesn’t affect your page. The downside is that our overlay depends on the layering (z-index) of the elements around it, which is why the stylings above can cause visual problems.