What's the best way to get rid of the one-pixel gap between these elements on high-resolution displays like

http://jsfiddle.net/36ykrp9x/5/

HTML

<div class="container">
     <button>O</button><button>O</button>
</div>

CSS

.container {
    width: 100%;
    background-color: rgb(120, 200, 200);
    text-align: center;
}
button {
    border: 0;
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    background-color: gray;
}

In trying to resolve a visual bug, the provided code demonstrates a thin line flickering between two buttons on Chrome 39. Surprisingly, this issue is not observed in Firefox or Safari. The buttons must be centered horizontally within a hierarchy with 100% width, and adjusting margins has proven unsuccessful in solving the problem without creating overlaps. Although using rgba(r,g,b,a) for the background color can address the issue, I am eager to find a solution that does not rely on this method.

Furthermore, fixed-width elements do not alleviate the problem as the button group must also be centered within them, which revives the thin line glitch. Avoiding JavaScript solutions, I am determined to find a CSS-based fix for this issue. Is there any way to resolve this without resorting to scripting?

Answer №1

After reviewing the information provided, along with my own experience using Google Chrome, it appears that the issue you're experiencing is likely a bug specific to Chrome. This bug seems to only occur on Retina screens in Chrome, as other browsers like Safari and Firefox do not show the same problem. Based on the flawless HTML and CSS you've provided, it's safe to assume that the issue lies with the browser itself.

To confirm that this is a browser rendering issue, I recommend testing the website on the latest version of Opera on your Retina display. Since Opera now uses the Blink rendering engine, which is a fork of Webkit like Chrome, any similar issues in Opera would confirm the bug lies within the engine.

Unless a workaround is discovered, my suggestion is to refrain from making any alterations to your website's code to address this browser rendering bug. By leaving it as is, you can avoid potentially causing more issues. When the bug is eventually fixed, no changes will need to be made to your site.

Answer №2

There seems to be an issue with jsfiddle.net as I am experiencing the same 1 pixel space problem in Chrome 40 on a retina display. You can test it out by visiting: or by loading the code directly below:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
    width: 100%;
    background-color: rgb(120, 200, 200);
    text-align: center;
}
button {
    border: 0;
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    background-color: gray;
}    
</style>
</head>

<body>
  <div class="container">
     <button>O</button><button>O</button>
  </div>    
</body>
</html>

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

Troubleshooting a Dynamic Navigation Bar Problem with jQuery Integration

Having developed a responsive navbar, an issue arises during iPad breakpoints where attempting to close the active navbar by clicking the hamburger icon triggers the jQuery script to also perform .removeClass(".active").slideToggle() on two buttons, causin ...

Step-by-step guide for embedding a Big Commerce website into an iframe

Can a website be opened inside an iframe? If not, is it possible to display a message like 'page not found' or 'this website does not allow data fetching in iframes'? <!DOCTYPE html> <html> <body> <h1>Using the ...

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

I am in the process of developing a website that compares different products. I have implemented code that retrieves and scrapes data for comparison when a user performs a search. Right now, I am using an ajax request for each company (currently 6 compani ...

What strategies work well for guiding individuals to different destinations based on their user roles, such as administrators and regular users?

In my CMS environment, I am facing a challenge with redirecting users who are not administrators or do not own the document they're trying to edit. The following code snippet is what I have implemented, but it seems that my administrators cannot acces ...

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

Is there a way to condense my child table directly below its parent column?

When attempting to collapse the "child tr" within the "tr" in my code, the collapse is not positioning correctly underneath its parent tr. While it works fine in a JSFiddle, the issue arises when using my editor and live preview. In this scenario, both "ch ...

Tips on retaining label names for input boxes

Check out this Plunker example. I am trying to figure out how to keep labels on top of textboxes in this Plunker. Can anyone help me with that? <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-clas ...

Could anybody provide some assistance with JavaScript?

<div id="toggler" class="toggler"> <div id="toggler" class="line1"></div> <div id="toggler" class="line2"></div> <div id="toggler" class=& ...

How can you retrieve attributes from a specific element within a dropdown menu?

I came across this intriguing HTML code snippet: <select id="selectSomething"> <option id="4" data-name="tomato" data-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbba0a2aebba08fbbe1aca0a2">[email ...

Tips for showcasing information from an external model on your webpage without the need to reload the entire page

My goal is to dynamically show a User's name above a form field where they input their Employee # without requiring a page refresh. For instance, when they enter their # and move to the next field, I want their name to appear above based on the datab ...

"Encountered an error while trying to access properties that

Struggling to create a practice menu with the functionality of making elements appear and disappear on click? If you are encountering issues with a class named "option" not working as expected, you are not alone. Clicking on nested objects like images or i ...

jQuery live DataAttribute manipulation

Here is the code snippet I am working with: <head runat="server"> <title>Sidebar</title> <link href="css/style.css" rel="stylesheet" /> <script src="scripts/jquery-1.11.1.min.js"></script> <script src ...

Is there a way to retrieve a numerical value from within two specific elements when web scraping?

I am new to web scraping and looking to extract the numbers located between the strong tags. Currently, I am using Python 3.8 along with BeautifulSoup for this task. <li class="price-current"> <span class="price-current-label"> </s ...

Step-by-step guide to implementing a floating action button on the bottom-right corner of a screen using Material-UI in a React application

I have been attempting to place the FloatingActionButton on the bottom right corner of the screen. To achieve this, I am utilizing the following library: http://www.material-ui.com/#/components/floating-action-button import React, { Component } from "reac ...

Ensure that CSS is integrated correctly

I have a main Django template that incorporates another template for the navigation bar. I currently have separate CSS files for both the main page and the navbar. My query is: what is the correct method to include the CSS from the navbar in the main p ...

The WordPress Customizer fails to update the CSS after making changes and saving them to an external stylesheet

I was looking for a way to improve the performance of my WordPress website by saving the styles from the Customizer into an external stylesheet for caching purposes. I found this code that allows me to save the custom styles into an external CSS file: $cs ...

The background image doesn't extend to the bottom of the page due to the inability to utilize background-attachment

Currently, I am working on a project that requires a background image to cover the entire page. Unfortunately, using "background-attachment: cover" is not an option due to the need for compatibility with iOS, which does not support this property. .sky-b ...

Troubleshooting JavaScript's onchange Function Dysfunction

Here is the code snippet I am working with: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-2.2.1.min.js"></script> <script src="slike.js"></script> ...

"Exploring the screen size options in Chrome version 38 using the

After the recent update, Chrome has introduced several new features for web developers. However, I've noticed that when you drag the screen with the developer tools open, it used to display the exact screen width size in the top right corner. Now, it ...

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...