Problem with absolute positioned items, flexbox and Firefox

peduarte / wallop

:no_entry: currently unmaintained :no_entry: A minimal JS library for showing & hiding things

1.1k stars 79 forks source link

Problem with absolute positioned items, flexbox and Firefox #84

Closed alexpi closed 7 years ago

alexpi commented 7 years ago

Hello,

I have a slideshow with image backgrounds and titles, centered on top of the images. I used flexbox on the slide divs, to center the absolute positioned titles on the images. This works fine in all browsers except Firefox, where the centering doesn't work as expected. I am getting jumpy title motion, or no centering at all.

I made a simple example here: [https://codepen.io/alexpi/pen/LjgBJy?editors=1100]()

I am not sure if this is Wallop's problem, a Firefox bug or my use of CSS.

honzabilek4 commented 7 years ago

Hi, This isn't obviously a wallop bug. Flexbox is mostly not playing very nicely with absolutely positioned elements. You have at least two options to fix this:

Add the images as a background and get rid of the position absolute on h1
Use different vertical centering technique such as this one

Regards, JB

alexpi commented 7 years ago

Thanks,

There is a simple solution I should have thought from the beginning: Put the flexbox container and positioned elements inside a separate 'slide' div, a child of the Wallop-item. Everything works perfect now.

honzabilek4 commented 7 years ago

Nice, please close the issue if solved. 🙂