Odd Behaviour in skewed elements

Hello, I was working in a project and something really odd happened.
I have a couple sections, on one I have 3 skewed divs (like slim slashes). And on the next below I have a fixed background with a gradient overlay.
When I try to add any interaction to the skewed divs the fixed background of the bottom section disappears.
I searched for something like this in the forums but nothing happened…

Any clues?
Pasting the project. I duplicated the bug as “BUG TEST” as I need to move on with the project, so I will be looking for alternatives into this.

Thanks in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Forgot to mention, If you drop the interaction on the skewed lines the BG goes back to normal.

Hi @Luciano_Path

I took a look at the preview link but it looks like the bug test page is working as expected. Did you remove the interaction from that page? If so can you add it back so I can take another look?

​Thanks in advance!

Done, I added a scroll into view interaction on section 02. And now you should see the fixed bg on section 3 go dark, and some odd positioning on section 3 moving circle.

Edit: The circle is fine, just the background is missing.

1 Like

Hi @Luciano_Path

I think I found a solution — can you please try to change the section-quehacemos to position: auto rather than position: relative:

​I hope this helps.

1 Like

Wow, that worked!
On the “home page”, I have the odd circle positioning. But I think I can copy from the Bug page and see if it works… Can you explain some of the reasoning behind your solution to avoid making the same mistake again?

Thanks a lot!

1 Like

It seems the position of the circle is affected because I have two different interactions, one for desktop and the other for mobile. Adding the interactions to the skewed bars seems to mess with that although there are no common classes nor relation between components…


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.