Strange yellow background color is showing up on OSX Safari

Whenever I hover over a language link with the language submenu open, an unexpected yellow background-color appears. This issue seems to be caused by the CSS rotation used for animating the menu opening.

The problem is only noticeable on non-retina screens.

Take a look at this image to see the issue:

Check out this link to see the problem in action:

I discovered that commenting out the CSS rotation used for the unfold animation fixes the issue. However, removing the rotation is not ideal because I specifically want that animation effect.

Answer №1

The issue lies with the CSS property background-color: transparent; that is being used on all elements. Safari seems to have trouble displaying this; consider specifying a color in HEX format instead to eliminate the yellow coloring.

Answer №2

After some experimentation, I found that applying a CSS rotation of 0 degrees to my links solved the issue. It may seem like an unusual fix, but surprisingly it did the trick.

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

Switching images upon hovering in AngularJS

Looking to change images on hover in my Angular app, encountered site peculiarities making CSS solution impractical. Resorted to using ng-mouseenter and ng-mouseleave for image swapping instead. landing.jade img.share-button(src='images/btn_share.p ...

html css angularjs

Ways to create spacing between property columns in MUI grid fashion

Is there a way to achieve space-between alignment when elements are stacked vertically in MUI Grid instead of using flex? I've come across suggestions involving giving flex:1 and height:100%, but I'm specifically interested in achieving this with ...

css material-ui

Steps for properly inserting a hyperlink:

I'm in need of assistance. I have a grid containing several images that I want to make clickable by adding anchor tags, but when I do this, the images seem to disappear completely. I suspect there's an issue with them being inside the container d ...

html css

Step-by-step guide on creating a blank horizontal line in an HTML table

Can anyone help me figure out how to draw a horizontal line connecting from td 1 to td 4 without relying on content CSS? I'm envisioning a progress bar like the one shown in the following image: https://i.sstatic.net/on8Bi.png <table> < ...

html css

Struggling to locate the CSS needed to perfectly center my Wordpress lightboxes

There seems to be an issue with the alignment of images on my website when opened in a lightbox (using the Lightbox Plus Colorbox plugin on Wordpress). Instead of appearing in the center, the images stubbornly show up at the top left-hand side of the scree ...

jquery css wordpress lightbox

Ways to conceal the contents of a page behind a transparent background div while scrolling

I created a Plunkr with the following markup: <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"& ...

html css twitter-bootstrap

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Hello there, I am currently using Bootstrap-vue to display data that has been queried from a database. My goal is to have it displayed with an overflow-y style similar to this image. If you know how to achieve this effect, please share your solution. Here ...

html css vue.js bootstrap-4 bootstrap-vue

Scrolling Down on a Jquery Login Page

I am currently utilizing JQuery version 1.4.2. My objective is to allow the user to scroll down to the login form by clicking on the 'login' option in the top menu, similar to Twitter's design. The implementation works impeccably with insert ...

javascript jquery ruby-on-rails css insertafter

The EJS is causing a problem with linking the style sheet

Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for bo ...

css node.js ejs

Transferring data from a text area to a table with AngularJS

Creating a C# MVC App with AngularJS My goal is to populate a table with values entered in a text area using Angular. Here is the process: Users input values into a text area like this: A B C When a user clicks a button, a modal window should open and ...

javascript html angularjs

When utilizing Xpath, it consistently triggers the Python <li> element as the first child

I am attempting to click on multiple links with the following code: self.browser.find_element_by_xpath("//li[@onclick[contains(text(),"+origin_iata_code+")]]").click() The origing_iata_code is from this list: ['FLL', 'MCO', 'AFL ...

python html selenium onclick html-lists

Leveraging Selenium to extract text from a dynamically populated DIV using JavaScript

I am currently utilizing Selenium to automatically retrieve all comments from a New York Times article. Once the comments are loaded, my goal is to extract them and save the information for future use. However, upon inspecting the source code of the articl ...

javascript dom html selenium

Having trouble with looping the CSS background using JavaScript in CodePen

Can someone help me with looping through CSS background images? Why is the background not changing in this code example: http://codepen.io/anon/pen/dGKYaJ const bg = $('.background').css('background-image'); let currentBackground = 0; ...

javascript css loops

What is the direction of auto-filling in CSS grid?

Here's an unusual query that I've been pondering. Despite checking various CSS documentation, I haven't found a clear answer yet. Take a look at this: https://i.sstatic.net/SglOl.jpg It resembles something like this grid-template-columns: ...

css layout css-grid

Troubleshooting Bootstrap 4 problem with varying sizes of div content

I have encountered a problem with the script below, where the content in a div is of variable size and does not always occupy the entire horizontal space allotted by the col-6 class from one row to the next: <div class="card-body " > <div c ...

html css bootstrap-4

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...

javascript jquery html mysql excel

What are some effective methods for testing web applications on mobile devices?

While I may not have the funds to purchase mobile phones and iPhones, I am eager to ensure my web applications can be accessed on mobile devices. Are there any software solutions available to simulate these devices, or what steps should I take? ...

html css mobile

The Super Sub menu is failing to display correctly as intended

I encountered an issue while trying to create a Super sub-menu. The problem is that the super sub-menu appears when I hover over the main menus, instead of the sub-menus. I suspect there may be something wrong with the display: none; attribute, but I' ...

html css css-selectors

Sending data to API using AngularJS Http Post

Upon clicking "Add new User", a modal pop-up will appear with a form containing a text field and a checkbox. However, upon clicking the create button, the data is not being posted to the API and the modal pop-up remains open without closing. I would like ...

javascript angularjs html api

Steps for positioning an element to the left and center of a div

I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png .body_clr { wid ...

html css

CSSer Q&A