Safari is not functioning properly with the css display:none property

My HTML code looks like this:

<div id="loadinganimationsearch">
    <div style="color: #28ABE3;font-size: 14px;float: left;">Fetching Textbooks</div>   
    <div id="block_1" class="barlittle"></div>
    <div id="block_2" class="barlittle"></div>
    <div id="block_3" class="barlittle"></div>
    <div id="block_4" class="barlittle"></div>
    <div id="block_5" class="barlittle"></div>
    <br>
</div>

This is how the HTML renders:

When I use the CSS below, the loadinganimationsearch container disappears in Chrome and Firefox.

 #loadinganimationsearch {
     display: none;
}

However, when I view it in Safari 5.1.7, the CSS seems to be ignored. Why is this happening and what can I do to resolve it?

htmlcsssafari

Answer №1

Upon investigation, I have pinpointed the issue:

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    }; /* The presence of this extraneous semicolon is problematic */
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    }; /* This semicolon should be removed */
}

It's crucial to eliminate the erroneous semicolons following the animation keyframe percentages. The corrected format should be:

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    }
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    }
}

It is likely that Safari disregards subsequent CSS rules after encountering these superfluous semicolons.

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

Tips for capturing the dx dy SVG attribute using CSS

Seeking advice on the most effective way to access the dx dy SVG attribute in CSS. If this is not feasible, what would be the best approach in JavaScript? ...

csssvg

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

I'm struggling to display an image on my website. I have the necessary code parts, but it's not working as expected. function showImage() { $('.img').addClass('display'); } function hideImage() { $('.img'). ...

javascripthtmlcss

What is the best way to align an image underneath text?

I'm currently working on this design concept: https://i.stack.imgur.com/wJm0t.png Below the title, there is a particle image with half square images positioned on the top right and bottom left corners. My goal is to center the particle image below th ...

htmlcssreactjsnext.jsstyled-components

Allowing CSS to break long words but not spaces for better readability

Imagine you have the following paragraph: thisisaverylongwordthatneverbreaks Applying word-wrap:break-word; results in: thisisaverylongwordthat neverbreaks This works well, but what if I try: this is avery long word that has spaces The output becom ...

cssline-breaks

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

Converting an HTML div to a string for export

In the process of developing my application, I am utilizing an angular widget to construct a dynamic dashboard. Here is the snippet of HTML code along with the associated JavaScript that enables this functionality: <div class="page" gridster="gridsterO ...

javascriptangularjshtml

Update the styling of each div element within a designated list

Looking for a way to assist my colorblind friend, I am attempting to write a script. This is the layout of the page he is on: <div class="message-pane-wrapper candy-has-subject"> <ul class="message-pane"> <li><div style=" ...

javascripthtmlcss

I prefer the jumbotron to be uninterrupted by the navbar

I'm facing an issue where my jumbotron is ending up under the navbar, but I want to position it just below with some padding in between. Here's the code snippet: Take a look at the current appearance here: This is how it looks like ...

htmlcssnavbar

The {shade} of the code has been modified within brackets

Ever encountered your code's colors abruptly changing to red and green in the middle of an HTML page? My editor is Brackets, and while it doesn't pose any issues, it's really bothersome and makes the code difficult to read: Take a look at t ...

html

Go to the identical page with a message embedded in it

Creating a login page using JSP involves an index.jsp file which contains the form and javascript scriplets. The connectivity to an Oracle database and validation of username and password are handled in check1.jsp. The problem arises after entering the us ...

htmljavascriptajaxjsp

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

We are currently developing a single page application that supports two languages, one being right to left and the other left to right. For scrolling functionality, we have implemented ng-scrollbars, an Angularjs wrapper for the malihu-custom-scrollbar-pl ...

javascriptjqueryhtmlcssangularjs

Unable to capture HTML form input in $_POST[]

I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...

javascriptphpjqueryhtmlajax

Certain content appears oversized on Android devices, yet appears appropriately sized on desktop computers

I am experiencing an issue with a webpage where the text appears normal on desktop but is too big on Android devices. Below is the code snippet causing the problem: <!DOCTYPE html> <html> <head> <title>ra ...

androidhtmlcsstext

comparing multiple values separated by commas with JavaScript

I need validation using a comma-separated value format. Within the illustration, there are two fields: "Saloon Price" (value: 10,10,10,10) and "Saloon Offer Price" (value: 11,11,11,11). The first value must be less than the second. Saloon price Value > ...

javascriptphpjqueryhtml

Transform JSON data into a PDF file using NodeJS

When a GET request is made to: 'http://localhost:4000/features', the response contains JSON Data with embedded HTML. I am looking to extract and save the content of the "name" and "description" fields as a PDF. Here is a sample snippet: [{"_id ...

htmljsonnode.js

The functionality of Jquery AJAX is operational, however, the message being displayed appears to

Inside the file changename.php, there is a DIV element: <div id="resultDiv"></div> Within the same file, PHP code can be found: <?php include_once ('connect.php'); if(isset($_POST['name'])) { $postedname = $_POST[&ap ...

javascriptphpjqueryhtmlajax

Styling a Pie or Doughnut Chart with CSS

I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...

javascriptcssreactjsnext.jsrecharts

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

htmlcsscss-floatwidth

Loading HTML dynamically

Currently, I am working with node.js, express, and handlebars. When passing JSON data via res.render() to handlebars (hbs), I use {{#each dataJson}} to loop through the data and display it. However, if my JSON file had a large number of entries, loading t ...

htmlnode.jsjsonexpresshandlebars.js

Incorporate jQuery on elements that are dynamically loaded after the page has finished loading

I need to determine if a dynamically added button is enabled or disabled. How can this be achieved? My goal is to display a message when the button is disabled and remove it when the button becomes enabled. This is my current code: jQuery(document).read ...

javascriptjqueryhtml