Safari and Firefox alignment/display issues

Hello Webflow community.

I am working on a website for a client and I am running into some issues with alignment between Chrome, Safari and Firefox.

In Chrome, everything works fine.

(Chrome - Everything working ok.)

(Sliders centered)

In Safari, the interactive dashboard element at the top of the home page does not display the little animated cards that show up on hover (works in Chrome and Firefox)

(interactive section not showing up in Safari - top half of screen display is missing)

In Firefox, the slider half way down the page is pushed hard to the right (is centered on Chrome and Safari) and the text disappears on a couple of the slides. This leaves the slider essentially unusable.

(Slides pushed to the right, and text/controls are missing from slides.

I have no idea how to make modifications that will affect the specific browsers, or any way of troubleshooting why they are acting differently in different browsers. This is a very high profile client project which I have to get right, any help would be greatly appreciated.

Hopefully this makes sense, but you will see the issue clearly by opening up the site in each browser.

Any ideas? @Waldo @PixelGeek


Here is a link to the published site: http://adrizer.webflow.io/

Here is the Read-Only link: https://preview.webflow.com/preview/adrizer?utm_source=adrizer&preview=07a8ebe0387b466f2aa6a74c7f976f91

replying to bump this as I posted it at an awkward hour and would like to get some visibility on the issue.

Ok, so I think I have narrowed down a few things. Most of this seems to be due to percentage based styling of some elements rather than setting defined pixel heights. But this creates some issues for responsiveness, and makes the layout considerably more difficult. Any advice on overcoming these issues?

Have you tried using vh (view height) and vw (view width)?

@aaronocampo - I have not played much with them in this instance, but I feel it would be as difficult to use those as it would be to use pixels because I am dissecting a section proportionately to get the interactions I want on hover. In theory, percentages are perfect for what I am trying to do, it just seems the browsers are not all up to speed yet. I will play with the VH and VW settings thought. Thank you for the suggestions.

1 Like