Streaming live at 10am (PST)

Changing backgrounds, Sections go missing and other bugs


#1

I'm having weird things happen to my latest site build. I'm using a variety of background images and colours for the different sections of the Landing Page I am building. Everything looks fine in dev, preview and when published, but when I come back to the project, the sections all have the same background style (sometimes a flat colour, sometimes an image). Generally, I can see that there is a colour or image associated to a styled Section, which I delete, and then everything magically returns to normal. But then later, after I have saved, left the page and come back, the same thing happens all over again, sometimes with a different image. It's driving me a little crazy.

Now, an entire section has disappeared. I wasn't even working on it, but after saving the session, quitting my browser and returning to the page, a whole section has gone. Soooo annoying and I can't for the life of me work out why.

Looking at restored versions, the pages display missing backgrounds and incorrect type stylings. Is that meant to be like that? I certainly don't feel comfortable restoring versions that don't look the way the did when I saved them.

And lastly, there are times when there are two styles applied to a component (both visible by their name) but when I click inside to edit the style, it dissappears.

So i'm not sure what's going on, if it's me or something odd i've done when laying it all out. It's obviously a work in progress so there are elements that aren't finished (notably the forms at the top and bottom of the page.

Thanks in advance!

Developer Preview
https://webflow.com/design/fm-landing01-new?preview=ae1bdffd83e332779775b0db23a9cd6d

Screen capture video
This shows what i'm experiencing: https://dl.dropboxusercontent.com/u/29898147/webflow-480.mov

Cheers,
Kain


#2

Thank you for the detailed report, @kain! The screen capture is a huge help. At first glance, it appears that your Section tags are all sharing the same style - Section Special which would definitely cause them to share the same background-image. It might help to try adding an additional class to those Sections to change their background properties.

As for the other issues you mentioned, I'm going to ping @callmevlad- as he is our resident CSS master - and might be able to shed some light on this topic.

Design looks fantastic by the way!

-Dan


#3

Thanks @danro

The Sections already share a base class (to define consistent margins) and I am using extra classes to define the background styles. The base class Section Special shouldn't contain any background image. And that's the problem...

I've logged back into my account this morning and all the sections are sharing the same background image inside the Section Special class (i've never put it there so it shouldn't be there). When I delete the image or remove the Image & Gradient Style, the image does dissappear and everything looks as it should. Yay! (or so I think). So I save the page and publish the page to check it's all working. It usually is, so I keep working. But if I close the window and return to the project, the background is back or another background is back.

I can't move forward until this works as I cannot rely on any of my work being updated. I've even had a whole section disappear and don't want to buildit and re-lose it again.

I'm loving your product, even with it's missing features, and I imagine I will be using it for a long time. Any help you can offer is greatly appreciated. Thanks for your kind words on the design. My first draft of the landing page is here - I decided to rebuild the page with a leaner class structure after I learned from my mistakes.

ka:n


#4

Thanks again for your patience in regards to the CSS rendering system. @callmevlad has been hard at work making huge improvements to the parser. In the meantime- I'm happy to hear that you have had some success in creating an alt design with a leaner class structure.

More to come!
-Dan


#5

Also, I noticed that you were using a custom Embed instead of a Video block. Was the video block not working for you?


#6

Hi Dan - the project with the css problems IS my alternative version! I really don't want to create a third version...


#7

Fixed the video embed. Thanks for that! Look forward to getting some results on the other CSS issues.


#8

Hey @kain, sorry for the delay in getting back to you!

I'm still trying to investigate how it's possible that you had an entire section disappear, so hope to update you on that soon.

About the CSS background image issue you're experiencing, it's an absolutely crappy bug in the current CSS implementation, and it rears its ugly head when the designer tries to unpack all the styles during the initial page load. It kicks in when there is any type of inheritance chain between background images (and transitions), and is a side effect of the entire inheritance system as currently implemented. We're almost done with a complete rewrite of the inheritance system that fixes this issue (and speeds up initial page load by up to 50X), but unfortunately it won't be production ready for another week or so.

For the time being, resetting BG images after a designer load is the best workaround (as frustrating as it is, admittedly). Since the bug kicks in when you reload the designer, it might be helpful to keep the designer open longer - e.g. open the dashboard in a different tab when you need it instead of in the same one. I know that's not idea (by a long shot), but really appreciate your patience as we get this sorted out.


#9

Hi @callmevlad, thanks for following this up. Firstly, i'm glad it's not a PEBKAC related issue and am super glad that you're already working on a resolution.

So just to confirm, the work around is deleting the offending BG image on page load, then make my changes and then publishing/exporting the site should all be good, yeah? It's just that when I reload the page it will default back to bug.

If that's the case, I can work with that workaround until your next release. I was closing the window when not working on it as I thought it was auto-saving all the time and though that might have caused the issue.

Cheers,
Kain


#10

@kain, yes, if you make changes then publish/export, then you should have a direct copy of what you see in the designer. It's only when you reload the designer and the styles get 'regenerated' that the issue rears its head.

It's not a big deal to leave the window open - Webflow only auto-saves if there are changes being made, so if you're not making any style/dom changes, nothing is sent up to the server.

Thanks again for your patience!


#11

I'm also experiencing issues with editing classes. When I click on an element there only appears to be a single selector attributed to the element (in this case "Prod Inset"). See screenshot 1 below.

But when I click inside the selector area to edit it, another class appears ("Product P") but I am unable to edit as any changes only apply to the parent class "Prod Inset". See screenshot below.

Is this issue related to inheritance chain issue? This is also driving me crazy and i'm unable to proceed.


#12

If you click the little "hamburger" selector menu, do you see your other selector there?


#13

@callmevlad I've had entire sections, and elements disappear. However in my case it's just when my finger drags across the laptop track pad. For instance:

  1. An element is selected.
  2. I bring the cursor across page to one of the panels on the right by using the track pad.
  3. However, the element selected is often deleted.
  4. So I have to be very careful how I bring the cursor over to the panels, and constantly ctrl z/undo.

#14

Guys - I'm also having the issue of entire sections going missing when I try to restore saved versions. It's a big issue as I've recreated the same section 3 times now.

I appreciate you're working on a resolution

Conor


#16