Streaming live at 10am (PST)

Issue with Safari ignoring div margin, when Chrome works fine


#1

Site URL – http://studiohumm-v3.webflow.io/services
Read-Only: https://preview.webflow.com/preview/studiohumm-v3?preview=5407d9631f9fae39d72e005c347f0961
Browser: Safari 11.0.2
No adblockers enabled.
Screenshots attached below.


Hey!

I’m having an issue that only appears on Safari, namely I have a fixed bottom div w/ stuff like social links and email, and it’s hidden (by z-index) by all the other content UNTIL it scrolls beyond the last element, which is a div block with linear gradient so it can have a nice gradual reveal, with the gradient div block having a margin-bottom: 100px so the bottom nav can appear—BUT, it doesn’t have that margin on Safari, it completely ignores any margin-bottom setting—whereas it works just fine on Chrome.

Here’s a screenshot from dev mode with Chrome:

… and here’s a screenshot from dev mode with Safari:

Any ideas on how I might solve this would be greatly appreciated :slight_smile:

Thanks in advance!
Dan


#2

Make the gardient element display:inline-block and Safari should respect its dimensions and margin.


#3

That (+ width:100%) fixes the div margin issue, but the buttons in the bottom nav are still unclickable, unfortunately, which I imagine means it treats the margin as an extension of the div instead of empty space (due to the differing z-index properties of the bottom nav and the div).


#4

@danbaciu great question! It looks like you’ve got a the footer elements are not clickable because the content on top of the page is being pushed over those elements at the bottom of the page. This is called collapsing margins. It is something related with how CSS works on the web.

Adding 1px of padding to the body element should resolve this issue. You can alternatively add top-padding to the first relatively positioned element instead of top-margin to resolve this issue.


#5

Hey @Waldo, thanks for the reply! I’ve tried adding both 1px of padding and replacing top-margin with top-padding on several different elements, but neither of these options has seemed to work. Am I completely missing the obvious here or just poor at implementing them?


#6

I figured it out in the end. It wasn’t an issue of collapsible margins—it was that the divs weren’t properly nestled. One of the case study pages had the bottom nav working, and I just looked for what was different there. Thanks for the help, though! :slight_smile: