Safari Glitch in Bootstrap 4

For a simplified version, you can check it out here: https://jsfiddle.net/dkmsuhL3/

<html xmlns="http://www.w3.org/1999/xhtml">


<title>Testing Bootstrap Bug</title>
<!-- Bootstrap V4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>


    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <img class="img-fluid" src="http://via.placeholder.com/1000x1000" />                    
            </div>
            <div class="col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum felis sit amet augue luctus, at dignissim purus tristique. Etiam elit eros, varius ac tincidunt at, condimentum at felis. Integer eget ullamcorper ligula, ut finibus quam. Nunc tempor, enim id ultricies fringilla, ante risus venenatis ipsum, in euismod purus quam imperdiet libero. Ut diam lacus, tincidunt egestas tristique at, blandit quis est. Aenean bibendum sagittis ligula, sit amet mollis nisi iaculis at. Aenean blandit, mauris ac fermentum malesuada, massa arcu scelerisque arcu, quis molestie diam purus ut dolor.</p>
                <p>Praesent egestas placerat dui, ac mollis dolor. In hac habitasse platea dictumst. Morbi sapien risus, consequat id tincidunt quis, lobortis a tortor. Morbi hendrerit tristique tempor. Vestibulum ultrices mauris magna, ac auctor lectus iaculis a. Aenean porta, nisi sit amet pellentesque fermentum, nibh ante molestie neque, non dictum ante justo sit amet dolor. Nunc scelerisque fringilla elit vitae tincidunt. Vivamus nec ex at enim aliquam tristique a in ipsum. Etiam bibendum mauris id scelerisque consequat. Donec nec orci leo. Nam ultricies condimentum porta. Mauris nunc nunc, ultricies in consequat sit amet, tristique ac lacus.</p>
            </div>
        </div>
    </div>

I've double-checked the code structure but for some reason, the two col-sm-6 columns are not aligning properly on Safari (5.1.7)

https://i.sstatic.net/qACrs.jpg

javascripthtmlcsstwitter-bootstrapsafari

Answer №1

This issue is not a bug as Bootstrap 4 does not support the version of Safari you are using (5.1.7, Windows).

Support for that specific version of Safari ended in 2012 when Apple discontinued development of Safari for Windows and released Safari 6.0.

Answer №2

Bootstrap does not support Safari 5.1.7.

This particular version of the browser does not fully support flexbox, requiring the use of the -webkit prefix, and lacks wrapping functionality. One workaround is to compile with a broader Autoprefixer scope that includes -webkit- prefixes, or manually add them yourself.

.row {
  display: -webkit-flex; 
}

If no other issues arise, this approach may work. However, due to the lack of support for flex: wrap, each row will need its own container.

P.S. Unless a significant portion of your audience still uses this specific browser, it may be best to prioritize other development considerations. It's likely that usage of Safari 5.1.7 is minimal.

Answer №3

After conducting some research online, I was able to find a solution.

It seems that Bootstrap 4 utilizes the flexbox property, but upon inspecting the values of the :before and :after pseudo CSS elements, I noticed they were set as table.

To correct this issue, simply update it to use flexbox

 .clearfix:before,
 .clearfix:after, 
 .dl-horizontal dd:before, 
 .dl-horizontal dd:after, 
 .container:before, 
 .container:after, 
 .container-fluid:before, 
 .container-fluid:after, 
 .row:before, 
 .row:after{
      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

Is there a way to utilize Javascript/JQuery to access and interpret PHP-generated HTML form data in a multi-dimensional array format?

I am having difficulty in reading and manipulating data from an HTML form using Javascript/JQuery. Situation: I have a sales screen displaying multiple products, and I aim to iterate through them all, analyze their contents, and showcase some of the data ...

javascriptjqueryformsmultidimensional-arraydata-structures

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

jqueryhtmlcss

Utilizing a setTimeout function within a nested function in JavaScript

Recently delving into the world of JavaScript, I encountered an issue with a code snippet that goes like this: function job1() { var subText1 = ""; var subText2 = ""; var text = ""; var vocabulary = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijkl ...

javascriptjquery

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

Error encountered when entering a value in the Material UI keyboard date picker

When I select a date by clicking on the calendar, it works fine. However, if I initially set the date to empty and then type in the date, it does not recognize the format and displays numbers like 11111111111111111111. This breaks the date format. If I sel ...

javascriptreactjsmaterial-ui

Retrieve the file path of the local system's home directory from the server

The server is up and running, I am looking to retrieve the file path of the local system in which the AWS server is operating using Node.js. ...

javascriptnode.jsserver

Internet Explorer struggling to function due to JavaScript errors

While Chrome and Firefox breeze through the page, it seems to hang for an eternity in Internet Explorer. Here is the problematic page: ============= Error Details: User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2 ...

jqueryjquery-pluginsjavascriptsimplemodal

Utilize the CSS exclusively for the specific element

nav ul { } nav ul li { margin-left: 7px; } nav.ul li a, a:link, a:visited { float: left; padding: 7px; margin-left: 15px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul li a:hover { } The styling above is ...

css

Error: Unexpected character encountered

When attempting to parse an array of objects enclosed in double quotes, I encountered an error: Uncaught SyntaxError: Unexpected token ' var test = "[{'key' :'D', 'value': 'Deceased Date'},{'key' ...

javascriptjqueryasp.net

Sending data from a PHP array to a JavaScript array within a PHP function

I have been scouring Stack Overflow for a solution to my problem, but I haven't found one that fits my specific issue. I recently took over a project from a former coworker that involves managing all the videos and images for my company. My current di ...

javascriptphparraysjsonajax

Exploring the functionality of async functions that utilize the await feature within the Karma and Jasmine JavaScript

Attempting to test an async function using Karma and Jasmine in an AngularJS v1.5.0 project. This async function, labeled as (a), contains 2 await statements: async function a(){ let var1 = await b() console.log(var1) let var2 = await c() } fu ...

javascriptangularjstestingasync-awaitkarma-jasmine

Creating unique random shapes within a larger shape on a canvas, as shown in the image

I have a parent rectangle and would like to add up to 10 or fewer rectangles on the right-hand side corner of the parent rectangle, as shown in the image below: I attempted to write code to achieve this, but the alignment is off-center from the parent rec ...

javascripttypescriptcanvashtml5-canvas

Encase the event handler within JQuery

Here's an example of inputs with OnBlur event handlers: <input name="abc" tabIndex="5" class="datetime" onblur="if (CheckMode(this))__doPostBack('abc',''); else return false;" /> Now, in JQuery Form ready function, I want ...

javascriptjquery

Tips for using Angular's formatDate function to format dates

I am attempting to achieve a specific format using Angular's formatDate "2019-01-01T00:00:00Z" Here is the code I am using: formatDate( '2019-01-01', 'yyyy-MM-ddT00:00:00Z', 'en-US' ) The output I am getting is ...

javascriptangulardate

Tips on removing a stylesheet while transitioning to another page in Vue

I'm new to Vue.js and I'm experimenting with adding and removing stylesheets in components using the mounted and unmounted lifecycles. Initially, I successfully added a stylesheet using the following code: mounted() { this.style = document. ...

cssvue.jsbootstrap-4vue-routervuejs3

What is the best way to submit several files along with additional fields simultaneously using FormData?

I have a collection called pocketbase that consists of fields like name, image, and order. My goal is to upload all the images with unique names and in parallel using the power of FormData. Take a look at my code below: export default function AddPhotosAd ...

javascriptreactjsnext.jsmultipartform-datapocketbase

Adjust the opacity of a div's background without impacting the children elements

I am currently working on a dynamic content display in my HTML page using some knockout code. The setup looks like this: <section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}"> <div ...

javascripthtmlcssknockout.js

Searching for a specific element in Vue.js using its unique identifier (ID) can be

I have a new project using Vue. It includes a div that loops through title and data. Inside the div, there is a search filter and content that renders in p tags. The p tags also go through a loop. Take a look at the code below: <div> <div v- ...

javascriptvue.jsvuejs2

Accessing form data within Mongoose schema hooks via JavaScript

I have a form where I've split the content into two separate MongoDB schemas. I want to access variables that are within node.js/express.js directly in mongoose schema hooks, whether through pre or post hooks of the schema. Here are my files: expres ...

javascriptnode.jsexpressmongoose

TypeORM ensures that sensitive information, such as passwords, is never returned from the database when retrieving a user

I developed a REST API using NestJs and TypeORM, focusing on my user entity: @Entity('User') export class User extends BaseEntity { @PrimaryGeneratedColumn() public id: number; @Column({ unique: true }) public username: string; publi ...

javascriptnode.jstypescriptnestjstypeorm