Issue: Overlaid position:absolute image renders fine in the designer, but disappears on publication
See photos attached. First photo is the site in preview, with the second screenshot being the site live.
Screenshot of the site in the designer
Screenshot of the site live (hosted on Webflow):
As you can see, the overlaid image disappears when the site goes live. Sometimes, when I access the live site, the overlay comes back, but only sporadically. Most of the time the overlaid image disappears.
EDIT: I have tested this site on the latest versions of Safari and it renders correctly. In what probably is a rarity, this bug only exists on Chrome and Firefox, not Safari.
EDIT 2: It seems the issue occurred when I set negative values to the absolute positioning, making the values positive fixed the issue
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Your image is there, it is only positioned outside the boundaries of the overflow:hidden parent.
That’s strange, I thought when I encountered this that that might be the problem as well. However, in preview in the designer, the image is still there, the issue only happens when the site is live.
Additionally, i’ve tested this site on the latest versions of Safari and it renders correctly without modification, with this only happening on Chrome and Firefox.
Do you know why that is? Currently the positioning is set via % (see values in first screenshot)
I’ve attached a photo of all the values attached to the parent div of the photo
That is the other photo, the one on the background.
The foreground one is “manager”
…which has a negative rem positioning, which I think it is the problem
Wow, silly me! You’re a lifesaver, that seems to have fixed the issue. Thank you so much
But what if I need to push my absolute images outside of the section according to my design? I have a page wrapper with overflow:hidden, then I have relative section also with overflow:hidden and 3 absolute images. Two images on the sides dowsn’t show up. Image on the top does. What should I do with images on the side?
confirmed… issue happens only in Chrome. If you set absolute image with any negative values, it will not display in Chrome. It will display fine in Safari. Webflow should fix this, or else not allow negative values/percentages on absolute images.
Also make sure the image is not set to “lazy load”: Click on the image, click on the “element settings” gear in the top right corner, and change “load” from “lazy” to “eager.”
This is the real fix!
We had the exact same issue with Chrome and negative left/right positioning while using Overflow: Hidden.
Changing the images to eager vs. lazy fixed the issue within Chrome!
Thanks! This solved my issue