Search code examples
htmlcsssafarifixed

Text Gets Covered When Using Fixed Position in Safari


I recently created a webpage for a company at http://www.parkprivatewealth.com/park and everything looked fine on Chrome. However, when using Safari to view the page, the homepage heading gets cut off when using fixed position. The text is there when I try to scroll up more and seems like something is blocking the text.

When I take off the "position: fixed" tag in the CSS the words appear again, would anyone possibly know how to solve the problem?


Solution

  • The problem: When the header changes to a fixed position, it gets pulled out of the document flow and the .container element pushes upward. Since you didn't use top, left, etc., the h1 element moves upward with .container

    The solution: Add padding-top to the .container element. It should be the same as the header height.