8

finished making website and all its features work across Chrome, Safari, and even IE11 and Edge..... but not Firefox... been like this for the last 3 sites that I have done. Mostly CSS3 related. Some CSS3 hacks are required for that browser... why are you the odd one out now Firefox??? That used to be the job of IEs!!!

Comments
  • 3
    I'm curious, what's not working in Firefox?
  • 1
    @devrocket flexbox, background images created with padding (to enforce a fixed aspect height ratio for a responsive width)
  • 1
    @devrocket Slick-Slider inside of a flexbox.
  • 1
    @williamli I work with flexbox too, IE11 is the worst.

    I haven't had any issues with background images. Is the padding a different size in Firefox?
  • 1
    Does it have a max-width on it? I've had that happen to me before where an overlay(loading screen) extended outside of the div.

    The container had a max width but the overlay did not. It was only an issue in Firefox.
  • 1
    @devrocket padding-bottom don’t work on FF and Edge. They both require height to be defined or else they won’t show anything (that was the case around September last year)
  • 1
    @devrocket thanks for the tips. will try to put a max width on it. right now it's a flexbox:

    sidebar (1/4) | content (3/4)

    it works when the content is full width wrapped on to its own row.
  • 1
    @williamli ya I know what you mean about the height. I use flex auto often to protect the height from collapsing (our biggest IE issue).

    don't you want vh for the height? Or is the height calculated from the view width
  • 0
    @devrocket i have some cards (with responsive width). i want to crop the images inside the card 4:3.
  • 0
    @devrocket and the worst part was that I was trying to switch over from Chrome to Firefox for development to save some CPU cycles and batteries...
  • 1
    @williamli on the bright side you found the bug before it went to testing.

    That's cool about the cards, I haven't seen that setup before.

    I usually use flexbox for the content widths and then set a min height of the body to be 100vh - the size of the header and footer.
  • 0
    @devrocket I have flexbox everywhere. replaced foundation / bootstrap responsive grid with my own flexbox responsive divs
  • 0
    @devrocket i am getting some luck with using min-width: 0;

    lol I stopped asking myself why it make any sense a LOOOONG time ago
  • 1
    @williamli might be similar to the min-height 1px that fixes IE
  • 0
    Can agree, I had some issues with Firefox and flex box too
  • 1
    @cabrasm was trying not to cross that line lol. I was curious but taking it more of rant instead of asking for someone to fix it. I'm sure he'll figure it out.

    @rEaL-jAsE I like flexbox. I've been using it since AngularJS had it in material.
  • 0
    @rEaL-jAsE what? you mean go back to divs with bootstraps grids??
Add Comment