Pro 6 Beta 4 - Custom CSS that was working in all previous betas not working in beta 4

Beta
#1

I have the below CSS in the betas. On a section with an ID. Note the z-index: -1.

#section2 > .x-row::after { content: ‘’; background: #F3E500;transform-origin: bottom left;transform: rotate(40deg);width: 150vw;height: 150vw;position: absolute;left: calc(50% - 260px);bottom: 50%;z-index: -1;}

The section has an ID, there is a background colour on the section and all z-index’s are set to auto. The CSS spans across multiple sections. All those sections also have a background colour.

This was working in the previous betas. In Beta 4 this stops working and the CSS ends up behind the backgrounds. I had to change my CSS to have a positive z-index. This meant I also had to manually adjust various z-index’s of other elements.

I’ve only done this playing around in the beta’s so not sure if it was broken before or broken now but it seems there is a difference beta this beta and the last one in terms of how this works.

Update to Pro 6.0.2 problems with auto and -1 z-index
#2

@urchindesign, is the above CSS taken directly from your site? If so, it seems you are using styled single quotes (e.g. ‘ and ’) for your content property. I changed these to unstyled single quotes (e.g. ') and your CSS statement works for me. Maybe the quotes got styled here in the forum since you didn’t put it in a code block, but I just want to confirm, because your CSS does work for me without any issues.

One minor thing I changed in this last round is setting the Row’s z-index default to auto rather than 1, as all of our other Layout Elements default to auto and we are trying to clean up unnecessary z-index sets when they aren’t needed, allowing users to opt in as they desire. With your CSS, it won’t work if the Row’s z-index is set to auto, as it will force your style below the page, but as long as your Row has a value of 1 or above, it should work.

#3

The CSS is working so perhaps something when copying and pasting.

The comment was more that this worked pre beta 4. I didn’t look into it too carefully. Perhaps it should have worked previously and now it is the correct behaviour.

It was working and now it isn’t unless I updated the z-index.

#4

@urchindesign, so was your Row’s z-index set to auto, and then when you set it to 1 your styles came back? If so, that might be something on my end just to make sure we have a migration that runs so people don’t lose styles like that.