Display issue on Safari when using flexbox?

I'm currently experiencing an issue with uploading a webpage to my domain, specifically on Safari. I have applied all the necessary prefixes, but it seems that the error lies with the display: flex property.

When viewed on Chrome, the page looks like how it should:

However, when viewed on Safari: Here is the CSS code snippet:

  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-webkit-box;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;

The homepage contains several instances of flex usage, but some items are not centered or spaced correctly in the navigation section!

You can visit my website at

htmlcss

Answer №1

Unfortunately, I am unable to test my solution on your updated website since the original post was made (I must say, your website is impressive!). Nevertheless, consider rearranging those statements for better results.

When I reordered the properties as shown in your code, it caused issues with one of my existing pages in Safari. However, everything worked smoothly when they were ordered like this:

  display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;

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

A guide to tracing a button click with a personalized <img> tag in Google Tag Manager

Recently, a marketing firm provided me with a custom tag to implement on a Wordpress site for tracking clicks on specific buttons. I am utilizing the Elementor page builder and have assigned unique IDs to each button. Although I am new to Google Tag Manage ...

javascripthtmltagsgoogle-tag-manager

``Is there a way to position an image at the center in Python dash?

Can someone help me with centering an image in my Flask dash app? Here is the code I have: import dash from dash import html, dcc import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div([ dbc.CardImg(src=r'assets/ ...

pythoncssbootstrap-4plotly-dash

Implementing a Javascript solution to eliminate the # from a URL for seamless operation without #

I am currently using the pagepiling jQuery plugin for sliding pages with anchors and it is functioning perfectly. However, I would like to have it run without displaying the '#' in the URL when clicking on a link like this: www.mysite.com/#aboutm ...

javascripthtmljquerypagepiling.js

Quiz timer using JavaScript

In my HTML and JavaScript project, I am creating a quiz game where players have 15 seconds to answer each question. To implement this timer feature, I used the following code snippet: <body onload="setTimeout(Timer,15000)"> Implemented in JavaScrip ...

javascripthtmldom

Using Jquery to target all elements except for their child elements

I have the following code: <div id="mn"> <span></span> <span> <span></span></span> <span></span> <span> <span></span></span> <span></span> </div& ...

javascriptjqueryhtml

Remove and modify an li element that has been dynamically generated within a ul list

Currently, I am facing an issue in my code. I am dynamically creating li elements by taking input from an input box and then appending the data within li tags using jQuery. However, after adding the li element, I have included a delete button. The problem ...

javascriptjqueryhtml

Can I construct an html table-esque layout employing fabric js?

https://i.stack.imgur.com/Zwkj3.jpg I'm in the process of developing a schema builder inspired by vertabelo. To achieve this, I've opted to utilize fabric.js for its interactive features. My main challenge lies in creating an HTML table-like str ...

javascriptangularjshtmlhtml5-canvasfabricjs

Creating Flexible Divs with Gradient Background for Older Versions of Internet Explorer - IE8 and IE7

I'm attempting to achieve the following. https://i.stack.imgur.com/YYOZv.jpg The issue I am encountering is that the elements in row1 have a different gradient background compared to those in row2. Additionally, row1 is populated dynamically with c ...

csshtmlinternet-explorer-8internet-explorer-7

Flickering in CSS transitions on Microsoft Edge

There seems to be a peculiar issue with CSS transitions in Microsoft Edge. The problem arises when there is a transition, such as between hover states, but the styles specified for those states are overridden by other styles in the CSS hierarchy. In such ...

csscss-transitionsmicrosoft-edge

CSS: Dynamically adjusting height based on parent element's current height

I'm seeking clarification on the topic at hand. Why am I unable to simply use the following code: <div style="min-height: 100vh"> <div style="height: 100%"> </div> </div> When I implement this code, ...

htmlcssbootstrap-5

Adjusting the height of an element as you scroll will activate the scroll event

One issue I'm facing is with adding a class to my header. The goal is to reduce the height of the top part of the header when the user scrolls down and then remove the class when they scroll back up. While this functionality is working, there is an un ...

javascriptjquerycssonscroll

An element featuring a background color is vertically aligned in the middle of its parent container

Struggling to achieve a seemingly simple task, but coming up short on finding a solution. The goal is to have a background-color that aligns vertically in the middle of the first and last images in a stack of images. It may sound more complicated than it a ...

javascripthtmlcssalignment

What is the best way to activate a click event when I set a radio button to checked?

I am facing an issue with an uninitialized property in my app.component.ts: color!:string; I am trying to automatically initialize the color property when a radio button is selected: <div> <input type="radio" name="colors" ( ...

javascripthtmlangular

Is there a way to adjust the container width to 1440px while also ensuring that the columns remain responsive with the help of Bootstrap 4 and SCSS?

Is there a way to customize the width of a container to 1440px while ensuring that the columns are still responsive? My project is built using Bootstrap 4 and SCSS. <div class="container"> <!-- Custom Container Width at 1440px--> ...

cssbootstrap-4sassresponsive-designgrid

Even with a correct XPath and the element present, Webdriver inexplicably throws a NoSuchElementException

There are 20 Google review score elements on a page like this. https://i.sstatic.net/9ErFS.png The XPath for each element is: //ol/div[2]/div/div/div[2]/div[%s]/div/div[3]/div/a[1]/div/div/div[2]/div/span To extract the review counts using Python and W ...

pythonhtmldomxpathselenium-webdriver

What does the term "the selected font size" mean when defined in em units?

Exploring the query raised in this post: Why em instead of px?, the top voted response sheds light on the nature of em: The unit 'em' is not fixed but rather relative to the current font size. It varies according to the user's chosen font p ...

htmlcssfont-size

Tips for sending a String[] to my Angular 2 HTML template

In the export class of my component, I have a string array variable declared like this; barChartLabel:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; To display t ...

javascripthtmlcssangular

What causes the `d-none` class to toggle on and off repeatedly when the distance between two div elements is less than 10 during window resizing?

My primary objective is to display or hide the icon based on the width of the right container and the rightButtonGroupWrapper. If the difference between these widths falls below 10, the icons should be shown, otherwise hidden. However, I'm facing an i ...

javascripthtmlcss

Unusual Login Problem Involving Ajax, jQuery, and PHP

My login header has two dynamic links: login/register and profile/logout. I previously used a PHP class function to check if the user was logged in and display the appropriate links, which worked well. Recently, I switched to an Ajax login to avoid page ...

phpjqueryhtmlajax

Tips for creating a div that slides from the right side to the left side

I received a code from someone and I need help with making the sliding div slide from right to left. Essentially, I want the div to hide on the right side and slowly move to the left within a width of 300px. Here is the HTML code: <a id="loginPanel"&g ...

javascriptjquerycss