Invisible images in Chrome when absolutely positioned

Design help General
1

Has anyone else come across this?
In the site I’m designing I am having issues with some absolutely positioned elements. In Safari everything shows up as expected, but in Chrome some of them are not. The only ‘fix’ I have worked out is specifying the width, but it isn’t necessary in all instances.

Is this just me not knowing enough web info background? Or is there more to it?
(BTW heres a screen cap of it: https://www.dropbox.com/s/5ikk5ybssrhvuxs/a-p.mov?dl=0
As I said before adding the size doesn’t’ affect how the site looks in Safari.)

Here is my site Read-Only: https://preview.webflow.com/preview/alk-2-03baa608ffe75237beb-ccb364e87ccc9?preview=84da9f62b267e67ac474b9bd63924e77

2

I’m on Chrome, I see your site, the image of the video doesn’t have dimensions and it still shows up.

3

the image doesn’t have dimensions – true, but the container does. if the container doesn’t have dimensions vanishes… (but Safari doesn’t care. is this something to do with how the browsers behave?)

4

This:

http://vincent.polenordstudio.fr/snap/all9j.jpg

IDK what you’re using this for but you shouldn’t, that’s what’s messing up with your container div dimensions.

Try to do this

http://vincent.polenordstudio.fr/snap/azrtg.jpg

Tip, display the grid when desgingin so you make everything fit in the grid

http://vincent.polenordstudio.fr/snap/8v3ng.jpg

5

YEEES! I was having the exact same issue. I added div 1, set to relative. Added 3 divs, with different colors. On 1st div, set to absolute, to cover. On 2nd, when adding absolute everything fell apart in the parent block, it all just went haywire. I thought it was me, but I guess I’m not crazy. Could’ve been a intermittent glitch.

6

Not sure where that problem originated from, but thanks for picking up on it. Learning as I go :slight_smile:
Will tighten up my positioning too. Cheers.

7

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