Mozilla Firefox increasing block element size by 1px with border-radius

Strangely enough, I have noticed a new issue with Firefox (16.0.1) recently. It seems that there is an extra white pixel row appearing within elements that have a border-radius set. This problem may have started after an update.

I have tried adjusting various properties like line-height and overflow, but nothing seems to resolve the issue. Interestingly, I cannot replicate the problem outside of the framework where these buttons are rendered. Despite disabling my CSS reset and other values in Firebug, the problem persists.

Since I am unable to reproduce it, I have created a visual demonstration showing the problem:

Has anyone else experienced this issue before and found a solution?

Edit: Upon further observation, I have also noticed that other elements, including inputs, are displaying incorrectly. Even setting the line-height for inputs does not fix the problem. Refer to the additional graphic below:

Below is the CSS tree for the input field shown in the second graphic:

.dynamicForm-componentEdit .componentLabel input.long {
    width: 320px;
}

.dynamicForm-componentEdit .componentSettings textarea, .dynamicForm-componentEdit .componentLabel textarea, .dynamicForm-componentEdit .componentSettings input, .dynamicForm-componentEdit .componentLabel input {
    background: -moz-linear-gradient(center top , #FFFFFF 0%, #FAFAFA 100%) repeat scroll 0 0 transparent;
    border: 1px solid #CDCDCD;
    border-radius: 6px 6px 6px 6px;
    color: #666666;
    font-size: 10px;
    height: 12px;
    line-height: 20px;
    margin-bottom: 4px;
    margin-right: 8px;
    margin-top: 4px;
    padding: 2px 6px;
    width: 130px;
}
input {
    font-family: Helvetica,Arial,Verdana;
    outline: 0 none;
}
* {
    margin: 0;
    padding: 0;
}
.dynamicForm-componentEdit {
    color: #AAAAAA;
}
.interfaceBlock-content {
    color: #666666;
    font-family: Verdana;
    font-size: 11px;
}
body {
    color: #333333;
    font-family: Helvetica,Arial,Verdana,Geneva;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
}

Edit #2: The issue appears to be linked to CSS3 gradients. By changing the CSS from:

background: -moz-linear-gradient(center top , #F7F7F7 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;

to:

background: none repeat scroll 0 0 #DDDDDD;

Refer to this graphic:

The problem disappears when using a regular background!

cssfirefoxrenderingpixel

Answer №1

By making the adjustment below, I successfully resolved the issue:

background-clip: padding-box

This change was applied to all affected elements and effectively eliminated the problem.

While this solution works, it may not be the most optimal method due to potential conflicts with gradient definitions. It is essential to specify the background property accurately for a correct implementation, like so:

background: -moz-linear-gradient(center top , #F7F7F7 0%, #E5E5E5 100%) repeat scroll 0 0 padding-box transparent;

If there are alternative approaches that offer elegance and efficiency, please share them in the comments or as an answer.

Edit: Further investigation revealed that using 'padding-box' resolves the rendering issue mentioned initially. However, the root cause stemmed from another source affecting paddings, resulting in misalignment of text within input fields (as shown in upper graphic #2).

The issue ultimately traced back to Helvetica, which was causing the problem mysteriously. Switching to Arial promptly resolved all persisting issues.

It appears to be related to font rendering intricacies or specific font metrics disrupting Firefox's renderer.

Answer №2

Looks like my previous response got taken down, probably because I provided a similar answer on another assignment that had the same problem. If you're curious about how I tackled this issue, check out my solution here:

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

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...

javascripthtmlcsssvg

"Apply CSS styling to an HTML element with the 'select'

Is there a way to set a specific height for the select element when it's not set to multiple? select{height: 30px;} I don't want this height to be applied if the select has the multiple attribute set to yes. Is there a CSS solution for this sc ...

csscss-selectors

LESS — transforming data URIs with a painting mixin

Trying to create a custom mixin for underlining text, similar to a polyfill for CSS3 text-decoration properties (line, style, color) that are not yet supported by browsers. The idea is to draw the proper line on a canvas, convert it to a data-uri, and the ...

javascriptnode.jscsslessdata-uri

Is there a faster method for adding and removing classes on a table?

I have a sizeable table containing 27 columns and anywhere from 5 to 100 rows. To switch between a simple view showing the first 5 columns and an expert view showing all 27 columns, I have implemented a mode switch (checkbox). Currently, I am using the fo ...

jquerycsshtml-tablejquery-selectors

Embed Zoom Video Without Any Cropping

Attempting to integrate the iPhone Simulator from into our website. Successfully set up a form for users to input their URL, which will then be displayed on a mobile browser via the simulator. However, the size of the embedded simulator is too large for ...

jqueryhtmlcssajaxiframe

"Responsive header design using Bootstrap for both desktop and mobile devices

Is there a way to create a header that adjusts its width based on the device viewing it, with maximum width for desktop and no padding for mobile? Here is an example of the code: <div class="row"> <div class="span12"> ...

csstwitter-bootstrap

Tips for creating a responsive width for a column of Bootstrap 4 buttons

I am attempting to design a vertical column of buttons that adjust responsively. Despite my efforts, the buttons do not resize properly when the screen size changes. I have explored resources on how to address this issue in Bootstrap and tried adjusting th ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

What might be causing my CSS animations to fail on Safari for iPhone when they work correctly on all other devices?

I am currently working on developing a website using HTML and CSS (without JavaScript), and I have implemented a keyframes animation in the navigation menu that triggers on :hover and :active states to display a sub-menu. The Issue: The animation function ...

cssioscss-animations

Revamp the components of the library class

Recently, I incorporated tabs from the Element UI into one of my projects. Feel free to check out the implementation at this link: https://jsfiddle.net/x3ybe784/ In this example, a div with the el-tabs__content class is generated by the library. .el-tab ...

javascriptjqueryhtmlcssvue.js

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar

Guide on positioning a div to float from bottom left to top right using CSS as the window screen size is reduced

I am wondering if it is possible to float the div using CSS in the following manner. My goal is to have CSS DIV 2 move under CSS DIV 1 to the right when the window size is reduced. Please refer to the screenshot below: On larger window sizes, three DIVs a ...

csshtml

Inconsistent CSS3 transitions behavior in Firefox 4

I have been playing around with some css3 transitions and created a slider test. It works perfectly in webkit browsers, but I have noticed an issue in Firefox 4. When clicking on the left link for the first time, the slider is supposed to slide to the left ...

javascriptjquerycssfirefox4

Is there a way to increase the size of the icon without altering the dimensions of the button?

After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds. However, I d ...

javascripthtmlcssbutton

Expanding Iframes in Joomla K2

Sorry if this question has been asked before, but I'm really struggling here... Here is the URL where the issue is happening: I am trying to embed an iframe from one of my client's websites onto my own personal website. Currently, I have the i ...

htmlcssiframejoomla3.0

Elements on the page appear and disappear as you scroll down

Whenever my scroll reaches the bottom of element B, I want my hidden sticky element to appear. And when I scroll back up to the top of element B, the sticky element should be hidden again. Here are my codes: https://i.sstatic.net/J49dT.jpg HTML <htm ...

javascriptjqueryhtmlcss

Ways to add space around the td element and properly align the content within it

I've recently delved into the realm of web development, and I'm encountering some challenges with HTML alignment. Despite exploring various resources and attempting to utilize align="left"/right/center attributes, I'm still struggling to ach ...

htmlcss

Div overlaps div on certain screen dimensions

When the screen size falls within a specific range, typically in the low 1000s, there is an issue where my content div overlaps completely with the navigation div. It appears as if both divs are positioned at the top of the page. Below is the HTML code sn ...

htmlcss

When hovering over a div, reveal another div on top of a third div

Imagine two adjacent divs, A on the left and B on the right with some other elements in between. Is it possible to have a third div, C, appear over div A when hovering over div B? I can control the display property using CSS, but I am unsure how to make d ...

javascriptcss

Standard User Interface Designs

I need to showcase a web app prototype to a client in the upcoming days. However, I struggle with CSS and never seem satisfied with the outcomes I achieve. While coding the business logic is easy for me, designing the UI consumes most of my time. I prefer ...

cssuser-interface

Implement jQuery to toggle a class on click for added functionality

I am attempting to create a box that changes color when clicked. When the box is first clicked, it will turn red by adding the class red, and if clicked again, it will change to blue. The colors alternate with each click, but I am unsure of how to achieve ...

javascriptjqueryhtmlcss