CSS Shadow Text: Adding an Annoying Twist to Negative Space

Is anyone else experiencing the same issue as me with this "effect," or is it just happening to me?

Check out this Fiddle Example

Do you also see a small gray dot in the blank space? I've tried changing colors, fonts, and more but haven't been able to remove it.

When there is no space (like in the h4 tag in my example above), the "dot" disappears.

I even took a picture in case you can't spot the "gray dot" in the original example:

Update: Seems like the issue is specifically related to Firefox on Windows 7 (and probably other versions).

Update 2: It could be a hardware-related problem since it only seems to occur on computers with an ATI graphics card. I'll continue investigating and meanwhile acknowledge BoltClock's response.

firefoxcss

Answer №1

Tested and confirmed on Firefox 8 running on a Windows 7 system. No issues found when using Firefox 8 on my Mac, and unable to replicate the problem on earlier versions of Firefox...

Since the issue seems to be unique to Firefox 8 on Windows, it is advisable to report it as a bug. Be sure to provide a link to your jsFiddle demo and include a screenshot for reference.

To report the bug, visit: https://bugzilla.mozilla.org/enter_bug.cgi

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 maintain the hover state even when the mouse is not hovering over it in CSS?

I have a lineup of 5 div boxes, and whenever you hover over one, it expands to fill the width of the screen. The default width of the blue div is set to cover the whole screen, allowing for the application of CSS to shrink it when hovering over the other ...

csshtmlhovertransition

What is the best way to constrain the ratio of a full-width image display?

I am in need of a solution for displaying an image at full width inside a frame with a 16:9 aspect ratio. The image needs to be centered within the frame and adjust responsively when resizing the screen. My preference is to achieve this using just CSS. ...

htmlcss

Embeddable video player failing to adjust size properly within parent div

I've been tackling the challenge of making iframes responsive within a div element, but I've hit a roadblock. While there are plenty of solutions available online, none seem to work seamlessly when dealing with YouTube video embeds. Currently, m ...

cssiframeresponsive-designskeleton-css-boilerplate

Creating an Image Link within Nivo Slider

I have been trying to figure out how to make an image a link in NivoSlider. I know that I can use captions to create a link, but I want the actual image to be clickable for better accessibility. I found a similar question on StackOverflow, but it was rela ...

javascriptjqueryhtmlcssnivo-slider

Get a Blob as a PNG File

Hope you had a wonderful Christmas holiday! Just to clarify, I am new to JS and may make some unconventional attempts in trying to download my Blob in PNG format. I am facing an issue with exporting all the visual content of a DIV in either PDF or image ...

javascripthtmljquerycssblob

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Currently, I am in the process of integrating a logo carousel into my React web application using CSS. My goal is to create a slider that loops infinitely, with the last logo seamlessly transitioning to the first logo and continuing this cycle indefinitely ...

cssreactjstypescriptsliderinfinity

Divide a single image into several smaller images and enable clickable links on each separate image, similar to an interactive image map

Challenge: I am faced with the task of splitting a large image (1920px x 1080px) into smaller 40px by 40px images to be displayed on a webpage. These smaller images should come together seamlessly to recreate the original full-size image, with 48 images a ...

cssvue.jsflexboxvuetify.js

What could be the reason for my navbar menu getting cropped?

I have been tasked with making modifications to a website that was created using Bootstrap v3.3.7. The site includes a navbar (HTML provided below) that appears fine. However, I needed to add a dropdown item to the navbar, which I did by following the guid ...

csshtmltwitter-bootstraptwitter-bootstrap-3

CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code : .logo { display: inline-block; width: 30px; position: absolute; top: 50%; opacity: 0; transition: 0.6s; } .container:hover .logo { opacity: 1; transition: 0.6s; } .container:hover .pictur ...

htmlcss

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs. The issue lies with the container d ...

javascriptjqueryhtmlcss

Tips and tricks for seamlessly aligning a specific section of your webpage to ensure it scrolls smoothly into view

My codes are not being centered when I use smooth scrolling on a specific section of a Bootstrap carousel template. Is there an easier way to achieve this? The explanation in a post from six years ago didn't help much. Here are my codes and screenshot ...

javascripthtmlcssbootstrap-4

Resolving a responsive bug in HTML and CSS

While I was in the process of optimizing my personal website for smartphones, I came across a bug that is visible in this image: https://i.sstatic.net/aFDjd.png https://i.sstatic.net/5oDRr.png The page width exceeds the screen size. Upon inspection using ...

htmlcss

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

As I work on my website, I aim to display images in a compact space, such as within a 300x300 <div>. What I envision is the ability for users to preview or enlarge these images upon clicking, allowing for a closer and more detailed view. For exampl ...

javascriptphphtmlcsslaravel

The image does not adjust size properly on mobile devices

How can I enable pinch-zoom and the ability to move around to view an enlarged image on mobile devices? https://i.sstatic.net/6JGRh.png Despite trying to add user-scalable=yes to the viewport meta tag, the image remains fixed within the viewport. Any sug ...

htmlcssresponsive-design

How to position two divs to the right of another div, without them being adjacent to each other, using CSS

I am trying to arrange three divs with background colors of Red, Yellow, and Blue. The goal is to have the Red div on the left, followed by the Yellow div next to it, and then the Blue div underneath the Yellow one. However, my current code is not producin ...

htmlcss

Creating a flexible image layout within a container with relative positioning

I attempted to create a basic slideshow with images sliding from right to left as an animation: let slides = document.querySelectorAll('.img-container'); let l = slides.length; let i = 0; setInterval(function(){ i = (i + 1) % l; if(i == 0){ f ...

javascripthtmlcss

Create a mobile-friendly version of the website that retains all the functionality and features of the desktop

Currently, I am in the process of optimizing my website for mobile devices. However, creating a separate subdomain and folder for a new mobile version is proving to be a challenge since it was not originally requested. How can I ensure that the website ap ...

htmlcssmedia-queries

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to ach ...

cssiconsdartangular-dartgoogle-chrome-app

The issue of flickering while scrolling occurs when transitioning to a new page in Angular

I have encountered an unusual issue in my Angular 13 + Bootstrap 5 application. When accessing a scrollable page on small screen devices, the scrolling function does not work properly and causes the page to flicker. I observed that this problem does not o ...

htmlcssangulartwitter-bootstrap

Executing a jQuery script on various elements of identical types containing different content (sizes)

I am currently working on a jQuery script that will center my images based on the text block next to them. Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle. The script looks like thi ...

javascriptjqueryhtmlcsszurb-foundation