New updates to border-radius functionality in Chrome

I've encountered an issue where using border-radius on a DIV that wraps a UL causes the radius to be lost in Chrome after hovering over the links inside the UL.

<div class="menu">
<div class="middle">
    <ul class="bmenu">
        <li><a href="#home"/>Home</a></li>
        <li><a href="#cv"/>CV</a></li>
        <li><a href="#projects"/>Projects</a></li>
        <li><a href="#contact"/>Contact</a></li>
    </ul>
</div>
</div>

For reference, here is an example: http://jsfiddle.net/TYgP6/

If anyone has a solution or workaround for this issue, it would be greatly appreciated!

htmlcss

Answer №1

To properly style the bmenu class, it is necessary to eliminate the position:relative property.

.bmenu{/*position:relative;*/}

I have made the necessary changes and you can view the updated version here. Feel free to take a look. I trust this information proves helpful.

Answer №2

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    width:100%; 
height:60px;    
    color:#000;
    border-top-left-radius: 10px;   
    border-top-right-radius: 10px;

}
Give this code a try instead of your current one. The position relative property on .bmenu needs to be removed.

Answer №3

If you add the Webkit prefix to the CSS property 

-webkit-border-radius:10px 10px 0 0;
, it should address the issue.

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 write the code to enable dragging the button for navigating to the next page?

<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...

javascriptjqueryhtml.net

pulsate feature doesn't appear to be functioning properly on every div

Just a quick question - I seem to be having some trouble with my div pulsating when clicked. Ideally, I would like them to pulse individually. Check out this JSFiddle link for reference. <script> $(document).ready(function() { $("#toggle").click ...

jqueryhtml

Learn how to execute SQL commands on an HTML page using a user input field and display the results directly on the page

When writing a command or filling up parameter values from a user input field, the goal is to send this command to PHP and then display the resultant value back on the HTML page. For example, consider the following scenario: select ___ from ____, Two ava ...

phpjavascripthtmlsqlajax

What is the best way to trigger multiple functions within an action?

I am currently encountering an issue with calling multiple functions using AJAX. My objective is to call different functions through AJAX, in such a way that when I make these calls, they should send a request and receive the returned values of those fun ...

ajaxhtmlasp.net-mvc-4

What is the reason behind v-container in vuetify.js automatically setting the fluid property when zoomed to 67%?

I have encountered an issue with vuetify where the v-container automatically takes full width at 67% zoom of the browser, even though I have not used the fluid property. It seems to work fine for the rest of the cases. <v-container> < ...

cssvue.jsgridvuetify.js

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox

Setting a global variable in the JavaScript code below

Is there a way to make the modal variable global by setting it as var modal = $("#modal"); ? The code snippet below includes the modal variable and is not functioning properly. It needs to work correctly in order to display: "Hello name, You have signed u ...

javascriptjqueryhtmlfullcalendarmandrill

The HTML button is not triggering the event in the designated graph container, but instead, it is triggering a different graph in High

I am facing an issue with two graphs displayed in separate container divs (container1 and container2) along with two sets of buttons. The problem is that both sets of buttons are currently only triggering changes in graph 2, even when clicking the buttons ...

javascriptjqueryhtmlhighcharts

storing a value in the browser's local storage

I am in the process of creating a new game that includes a high score feature. The idea is that when the current score surpasses the existing one stored locally, it will be replaced: localStorage.setItem('highScore', highScore); var HighScore = ...

javascripthtmllocal-storage2d-games

PHP: Locate a class within an HTML element using a regular expression

I have a question about customizing my HTML ul menu with submenus. Specifically, I am looking to dynamically add a "first-item" class to the first item within the submenu using PHP. <ul id="menu-main" class="menu"> <li id="menu-item-68" class=" ...

phphtmlregex

Ensuring all my input fields are uniform in size on the left side

Hey there! I am currently working on some input fields that have a left and right side. The left side serves as a label while the right side contains the corresponding data. One challenge I am facing is that the left sides of the fields vary in size based ...

htmltwitter-bootstrapbootstrap-4

Tips for setting a specific height for an HTML table

For some reason, I can't seem to control the height of this table. I've set it to a maximum of 20px but all the rows are still showing. Here is the CSS: table { border:1px solid black; overflow:hidden; height:20px; max-height:20 ...

htmlcss

When you click on the logo, it will automatically redirect you to a designated Bootstrap Tab and set that tab

After searching through numerous posts, I am still struggling to find a solution to my straightforward issue. My requirement is simple: when a user clicks on the brand (logo), it should not only redirect them to a specific tab but also make it appear as a ...

jquerycsstwitter-bootstraptabs

jQuery.addClass function not functioning correctly

I am encountering an issue where the functionality in this code snippet isn't quite working as expected. Specifically, I would like the 'huh' div to become opaque when the menu is hovered over. While attempting to achieve this with fadein/ou ...

jqueryhtmlcss

Determine Checkout Total with Laravel 5.2 Based on Radio Button Selections

Currently, I am developing an e-commerce platform using Laravel 5.2. At the moment, I am able to add products to my shopping cart, which is stored in a session. Once I am ready to proceed, I can view my shopping cart and upon confirmation, I am directed t ...

javascriptphphtmllaravel

Problem with scrolling in Firefox when inside an <a> block

My issue in Firefox is that I can't scroll by dragging the scrollbar within an <a> element: <a id="monther" class="single" href=""> <span>Month</span> <ul class="month" style="height:100px;width:200px;overflow:auto; ...

htmlfirefoxscrollbar

How can I ensure the MatBottomSheet aligns perfectly with the top toolbar?

If we intend for the MatBottomSheet to appear with its top aligned perfectly against the top toolbar, what is the most effective approach to achieve this? Refer to the demo provided in the documentation. View the demonstration here In this stackblitz ex ...

htmlcssangularangular-material

How to Retrieve the Value of a Radio Button with JavaScript

Issue: Difficulty in retrieving the value of a radio button or text box input. Through trial and error, I managed to access the information within the div gender1. I struggled to extract the values of gender or age. Despite attempting methods like append ...

javascripthtmlradio-button

Creating input fields similar to the Mail app on OSX

Is there a way to create input fields similar to those in the Mail App on OSX? Take a look at this screenshot - I'm looking to group text as shown in the image above. Instead of having multiple individual input fields (e.g. like in the mail app for ...

formshtmlcssinput

The components of my website shift and adjust as the size of the page is changed

I've been experimenting with different properties, but my CSS just won't stay in place. I've tried using absolute and fixed positioning, but without success. I want the elements to remain in their respective positions - the greeting on the l ...

htmlcssreactjscss-selectorsjsx