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.
Please advise!
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
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)
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.”