Browser compatability and Flexbox layout

Design help General
1

Hello,
I am designer, with basic front end experience, new to webflow and I am trying to redesign our company website. I built the site using flexbox and getting it to work right across all browsers has been more of a challenge than I expected. I tried fixing a few problems by replacing some flex elements with floats and still can’t figure a few things. My public link is below along with a few issues I am having.

https://preview.webflow.com/preview/flex-site?preview=2aef4709f7bf4bda63dcd8610966ca30

IE (Internet Explorer)
1- I uploaded a social media font and IE is the only browser that is not displaying it.
2-The custom scrollbar styling on the CLIENTS page(when shrinking the window to trigger text scroling) is not working, only seeing ugly default scrollbar. Also the outline offset is not working correctly.
3- When hovering on the navigation bar, an extra bottom padding/margin is added.
4- I’ve noticed extra padding/margin on the: HOME page links (“pillar buttons”) & ABOUT US>OUR MISSION page below the quote block.
5- when browser is in full screen mode, there is what seems like a 1px line copy of the full width of the site that appears when scrolling but disappears when browser window is resized.

Safari (on a windows machine)
1- SALES page Product list and vendor logos, INSTALLATIONS venues list and services list not displaying correctly, I assume it is a flexbox styling issue?
2- the GALLERY page lightbox is not working, bg shows but no close button or gallery.
3- CLIENTS custom scrollbar styling not working and close button of “testimonials” not working.
4- FACILITY page (under ABOUT US) first “previous article” image not sizing correctly.
5- PRESS page “previous articles” at the bottom, not sizing correctly and archive article (once clicked from PRESS) “publisher logo” not displaying correctly.
6- CONTACT page close button not working correctly and “reach out” form not flexing when browser is resized.
7- share “social icons” in Header (R) extra padding/margin below.

Safari (on mac), Chrome, Safari all seem to be working fine. Have not checked on firefox/mozilla yet but plan to.

Any feedback or help is much appreciated, we are trying to get this up asap.
Thank you in advance!
-Alex

Here is my public share link: LINK
(how to access public share link)

2

I have tested in Mozilla/Firefox and all is working fine… still looking forward to some feedback.

3

Hi @tpi16

Thanks for posting.

Unfortunately Internet Explorer does not fully support Flexbox. (Can I use... Support tables for HTML5, CSS3, etc)
There are still a lot of bugs on IE’s end with Flexbox that they haven’t addressed.
I would also check caniuse for the font issue you mentioned.

Try logging into Webflow in Safari and checking the Designer. Flexbox has settings that display differently in Safari. You should be able to see the issues and make adjustments accordingly.

Regarding the extra margin/padding, Can you see a px change inspector? Or does it show the same and render differently?

Hope this helps! :slight_smile:

4

  • When I try to log into webflow, via safari on windows… designer will not load…, so I can’t even get to the designer to try (safari on mac is fine)… not sure where to go from here.

  • here are examples of IE’s extra padding
    this is what it looks like in chrome after navbar has been hovered (correct):

  • this is what it looks like in IE after navbar has been hovered (wrong bottom padding/margin):

  • “pillar buttons” after hover(chrome on Left showing correctly, ie on the right… extra padding?)

    3267×912 339 KB

*I’ve even tried using the developer tools to “see” where this extra padding/margin is coming from… and I just can’t figure it out.

  • Still looking into the font issue, will reply when I have an answer or have exhausted my resources.

Brando, Thank you for the help and reply!

5

As far as the custom Font Issue, I had to upload a different font file… working now .
Here is the post that helped me

6

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