Streaming live at 10am (PST)

Interaction causing problems with CSS background


#1

Hi there, love Webflow so far, but I might've encountered a bug.

In short: when adding an interaction to a link (in this case), it'll dump the background settings for that specific link. Not all the links carrying that specific class, just the specific one using the interaction. The problem endures after deleting the interaction. It's possible to recreate the problem time and time again.

You can check out the site at: https://preview.webflow.com/preview/grommit-b88b34?preview=f6a13c90f7668a1d602f149fcf6734a7

Two screenshots demonstrating the situation as it stands:

This screenshot shows the correct link with it's background, it bears the same class as the link in the screenshot below.

This screenshot shows the faulty link where the background has disappeared. It bears the same class, but has no background (on hover). The only difference between the correct and faulty one is that the latter has had an interaction on it.

You can recreate the problem in the share link by selecting any of the 'linkWhite' classes and adding an interaction to it. It'll break the background on hover.

Any way to fix this?


#2

Good catch, I tried every way I could to make it work but couldn't.

Does it happens on the published site too? Could you publish it so I can analyze it by curiosity?

Now to get out of this bug, select all the text of the fault elements and click on Clear Formatting in the popup toolbar. Then click the paintbrush again and reapply the class, you'll get the hover effect back.

Sorry, I didn't find any workaround to make the interaction work with the bg on hover. I tried so many things though... altering the display, adding extra class...


#3

Sure man. I published it.

Updated the share link to: https://preview.webflow.com/preview/grommitsite?preview=f6a13c90f7668a1d602f149fcf6734a7

Published at: http://grommitsite.webflow.io/
Seems the same there.

While it's a silly little bug, it's kind-off messing up my ideas for the site. Thanks for the quick fix, I'll try to work around the interactions for now.


#4

Ok, No more luck for me to understand why it does this.

2 things though:

  1. damn great use of a superb superb vertical image! Taking inspiration here.

  2. if you enlarge a text on hover, try to give the normal state a transparent border (and padding/margin if needed), to begin with, so when you hover, all the text around doesn't move.


#5

Hah. Thanks, I kept wondering why I'd go the regular horizontal hero way. So here's to the vertical revolution!

And thanks for the tip, I'll give it a try. I honestly don't mind the moving, adds to interaction of the user.


#6

I'm certainly going to take inspiration here and shoot some vertical panoramas for web use very soon :smile:


#7

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