The navbar extends fully in height when viewed in Safari browser

My navbar design is flawless on most browsers, but in Safari it appears stretched at full screen height. Here's how it looks in other browsers: https://i.sstatic.net/H9noX.jpg

https://i.sstatic.net/Embf3.png However, in Safari...not so much: https://i.sstatic.net/uFDsa.jpg

https://i.sstatic.net/SUgnx.png

Initially, I suspected that the issue might be related to the use of position:sticky, linear-gradient, and box-shadow in my CSS. But then again, I also have react-scroller implemented. Could that be causing the problem?

Below is a snippet of my SCSS code:

Navbar general:

.thematic-area-nav {
  position: sticky;
  position: -webkit-sticky;
  width: 70vw;

  <!-- Rest of the general styles -->

}

Could this, in fact, be a CSS-related issue?

Answer №1

After analyzing the html/scss code on jsbin, I performed some cleanup and was able to achieve a result that aligns closely with your vision.

Here are some key points to keep in mind:

Avoid using vw and vh units for font sizes unless absolutely necessary.

When specifying width/height in %, always consider how the browser calculates these values (ask yourself "percentage of what?").

Utilize https://validator.w3.org/ - it can be really helpful.

Avoid mixing camelCase and-this__convention.

Maintain cleanliness in your code.

HTML

<div class="thematic-area-nav">
  <div class="thematic-area-nav__logo-wrapper">
    <img class="thematic-area-nav__logo" src="https://picsum.photos/200/90" alt="Logo Coaching People">
  </div>
  <ul class="thematic-area-nav__areas">
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 1">Obszar tematyczny 1</a></li>
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 2">Obszar tematyczny 2</a></li>
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 3">Obszar tematyczny 3</a></li>
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 4">Obszar tematyczny 4</a></li>
  </ul>

</div>

SCSS

.thematic-area-nav {
  position: sticky;
  padding: 5px;
  border-radius: 0;
  margin: 0 0 20px;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  font-size: 16px;
  box-shadow: 0 0 25px 1px #000000;
  border-radius: 0 0 5px 5px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from($color-background-primary),
    color-stop(50%, rgb(237, 237, 237)),
    to($color-background-primary)
  );
  color: black;
  padding: 10px;
  display: flex;
  flex-direction: row; 
  justify-content: space-between;
  @media (max-width: 420px) {
    display: block;
  }
 }

.thematic-area-nav__logo-wrapper {
   @media (max-width: 420px) {
     text-align: center;
     margin-bottom: .6em;
  }
}
.thematic-area-nav__areas {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  flex: 1;
}

.thematic-area-nav__singleThematicArea {
    padding: .6em 1em;
    margin-bottom: .6em;
    text-decoration: none;
    color: black;
    border-top: none;
    border-bottom: none;
    border-right: 1px solid rgb(218, 218, 218);
    border-left: 1px solid rgb(218, 218, 218);
    border-radius: 5px;
    box-shadow: 1px 1px 1px;
    background-color: $color-background-primary;
    &:hover {
      color: black;
      box-shadow: inset 1px 1px 1px;
    }
    &:focus {
      outline: none;
      box-shadow: inset 1px 1px 1px;
    }
}

Answer №2

It seems unlikely that the issue originates from your React code. Would you mind sharing the HTML and CSS generated by your React application, along with a test case containing only those elements? This will help determine if the problem persists without JavaScript enabled. Are you open to sharing a link to your repository?

On another note, placing a link within a button may not be best practice. It could potentially fail accessibility standards. Additionally, using "class="Obszar tematyczny 3"" as a value seems odd, and an unordered list (ul) should ideally only contain list items (li), anything else would not be valid markup.

Your styles appear to have some inconsistencies with flexbox properties. It's a bit unclear what your intentions are with the layout. It might be beneficial to review the flex container and child properties for better understanding.

Furthermore, it might be advisable to avoid using the * selector in your CSS. Eliminating its use can contribute to cleaner and more maintainable code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I modify the Twitter Bootstrap carousel's background?

Is there a way to customize the background of Twitter Bootstrap 3 carousel? I am looking for a solution where I can have a plain red background and then overlay each carousel image on top of it. I have tried modifying the CSS of the <body> tag to a ...

What is the method for accessing font sizes through CSS code?

Why is the font size value in CSS returning incorrect values? Check out this jsFiddle example Here's the HTML code snippet: <div id="test">TEXT</div> <div id="test2">TEXT2</div> Now, take a look at the CSS: #test{ font ...

What could be causing the drop-down list to remain fixed at the top and bottom while scrolling?

Whenever I open the drop-down and start scrolling, the list either sticks to the top or the bottom of the div. I tried switching the positions of the parent div and the drop list, but I couldn't find a solution. Is there any way to make the drop-list ...

Can my code be compacted to have 33% spacing with a margin between each division?

Arranging spacing evenly in CSS is a relatively straightforward process. Despite the abundance of stack overflow questions on the subject, one aspect that remains unclear is how to add spaces (or margin-left & margin-right) between each box. For clari ...

Is it possible to resize background images on Safari?

Encountering an issue with Safari where the background isn't scaling properly. It functions perfectly in Firefox, Chrome, and other browsers, but Safari is presenting a problem. Here's a link to the site: This issue occurs when the resolution is ...

What is the best way to arrange cards in a specific order with breaks in between each flip

I am currently working on creating flip cards using HTML and CSS. I have successfully implemented the hover effect which flips the cards when hovered over. Now, my goal is to make the cards automatically flip one after the other at specific time intervals ...

Toggle the current list item in Jquery to expand to 100% width, while simultaneously shifting any adjacent items on the left and right downwards if present

I am working with a list (ul) that contains multiple items displayed in a tiled format. Each item has a brief introduction and can expand to show more information when clicked on. What I would like to achieve is for the expanded item to take up the entire ...

CSS Begin the background repeat from a specific origin

I am trying to achieve a specific background effect starting from the line shown in the screenshot below: I attempted to implement it using the following CSS code: background : ('path/to/image') 0 650px repeat-y However, the light part of the ...

Disable the parent CSS styling when focusing on the child button

Within an anchor tag, I have a div element. The CSS on the :active state is set to transform the element, but I want to avoid this behavior when focusing on the child element bx--overflow-menu. I am working with NextJS using styled-jsx and SaSS. Here is my ...

What is the best way to synchronize Bootstrap styles across various HTML files?

Currently, I am part of a group project in school where I am just beginning to learn about html, css, and bootstrap. Each of us has been tasked with creating individual html files to represent web pages for our website, and then we will apply css styles t ...

The scrolling feature within individual div elements seems to be malfunctioning in Ionic 2

In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views. The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area. On the other hand, the se ...

Mouse cursor does not display as a pointer when utilizing an SVG image on Internet Explorer

Consider this html: <a href="http://www.wikipedia.com"> <object data="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" type="image/svg+xml"> <img src="http://herdeirodocaos.files.wordpress.com/2007/11/wikipedia-lo ...

Is there a potential white-space issue with jQuery CSS in Internet Explorer versions 7 and 8

Recently, we encountered an unusual issue with jQuery and CSS while working on compatibility with IE7 and IE8. Our project involves animations and height measurements, and during the animations, we wanted to prevent text from wrapping. To achieve this, we ...

Border utilities in Bootstrap 4 provide easy ways to add borders

I have been searching for a solution, but I can't seem to find it. Bootstrap 4 offers utility classes for adding and removing borders, but is there a way to define the border width or style like solid or dashed? <span class="border"></span&g ...

Steps for embedding a dynamic 3D model onto a website with THREE.js

Seeking guidance on integrating animated 3D models onto a webpage using THREE.js. Currently, I have successfully loaded a static 3D model named 'aaa.gltf' with auto rotation and orbit control functionality. However, when trying to load another an ...

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API. To maintain the same website structure, I have broken down my code into components and imported ...

Leveraging JavaScript to access the margin-top property of the HTML and body tags

I'm having trouble retrieving the "marginTop" style property from the <html> and <body> tags. While Chrome developer tools shows that margin-top is being set via in-HTML CSS: <style type="text/css" media="screen"> html { margin-top: ...

React-Tooltip trimming

Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn&a ...

Expand the dimensions of the shinydashboard dashboard page

Currently, I am using shinydashboard and have formatted my ui code in the following way: ui = dashboardPage(skin="black", dashboardHeader(disable = T), dashboardSidebar(width=300), dashboardBody() ...

Utilizing bootstrap for a responsive design that includes max-height constraints and horizontal

Seeking to modify the appearance of my Angular Template by incorporating Bootstrap and a custom CSS file. <!-- index.html --> <div static-include="partial/example.html"></div> The static-include directive, sourced from Stack Overflow, p ...