Strange glitch found on Firefox causing overlay to appear within image

Upon visiting the website https://www.sitepor500...com.br (please replace the 3 dots with just one to avoid SEO juice) you'll notice an image as a background with a specific pattern overlay.

While everything appears fine on Chrome, strange patterns can be seen on Firefox, like the attached image. My zoom is set to 100% and all other FF settings are default.

Is there a CSS property I can adjust for the overlay to display correctly in Firefox?

This issue seems to only occur when my Windows scale is at 125% (the recommended option). Refer to the images below:

https://i.sstatic.net/S0C0w.png

https://i.sstatic.net/NSxfH.png

htmlcss

Answer №1

I tried to replicate your problem on a screen scaled to 100%, but I couldn't reproduce it. However, you may want to consider adding background-size: 1px 2px; to the background image in #slideshow_fundo1

<div style="position:absolute; left:0px; top:0px; width:100%; height:100%; background:url(imagens/vegas-04.png) top left repeat; background-attachment:fixed; background-size: 1px 2px;"></div>

Adding this will ensure that the background-image retains its original size and resolves any scaling issues.

UPDATED

To fix this issue, try setting your Windows Display settings to a Scale and layout of 100%. This worked for me when testing your problem on Firefox at 125% - I was able to recreate the screenshot you provided.

Answer №2

When using Firefox on Windows machines with the scale and layout set to 125%, there is a glitch that can be fixed by pressing Ctrl + Shift + twice and going back to 80% in Firefox. However, this solution seems quite absurd.

This issue is not exclusive to notebooks in Brazil. It occurs on any Windows machine with a scale layout of 125% on any screen size. It's my opinion that FF should address and fix this problem. Other browsers do not have this issue.

Have you reported this bug to Firefox?

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

Press on the menu <li> item to create additional submenus

A group of friends is facing a challenge. They want to create a dropdown sub-menu that appears directly below the selected item when clicking on a link from a menu. So far, they have been able to use ajax to send requests and generate a sub-menu. However, ...

javascriptjqueryhtmlcssmenu

Safari keyframe animation causing wobbly off-center rotation

When viewed on Safari, the spinning animation appears off-center. How can this issue be resolved? The CSS code responsible for the animation is as follows: html, body { height: 100%; } body { background: #a6b8b1; display: grid; place ...

htmlcss

Include "clickable" commas among various <span> elements

Struggling to insert commas between a series of items? Well, fear not! If you're wondering how, it can be achieved with a simple line of code: .comma:not(:last-of-type)::after{ content: ", "; } <span class="comma">A</span> <s ...

javascripthtmlcss

Attempting to align two distinct divisions next to each other

Here is the updated code snippet: <Grid container justify="space-between" alignItems="flex-start" direction="column" xs spacing={5} style={{ padding: 10, }}> <ParamSelection/> { state.select ...

cssreactjsgridmaterial-ui

Yii2: Incorporating an entire UI/Design concept sourced externally from Yii

My colleague and I are collaborating on a website project. He is responsible for frontend UI design, customizations, and everything related to end users. The layouts/themes we are using are based on Bootstrap, with additional elements from the Metronic the ...

phpcsstwitter-bootstrapyii2

Assign a class to the child element if it shares a numerical class with its parent

My goal is to apply a specific class to a child element if it shares the same numeric class as its parent. If the child does not have the same numeric class as the parent, then I want to remove that child element altogether. However, I am encountering an e ...

htmljquerycss

Unable to obtain the selection from the dropdown menu

I am currently populating data from a JSON file into a dropdown list. The code snippet I am using for this task is shown below: $(function() { $('#productList').append($('<option/>').attr("value", key).text(data[k ...

javascripthtmljqueryjsonspring-boot

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

javascriptphphtmlformsvalidation

Data structures of advanced complexity within HTML data attributes

I am delighted by the existence of the html5 data attribute. It's great to be able to input a plain string into html attributes and retrieve them using jquery. However, wouldn't it be wonderful to have more than just a basic string? Is there a ...

javascriptjqueryhtml

ASP.NET Image Tag Error DetectedHere is the original unique text

Here is the code snippet I am working with: <a href="~Home.aspx"> <img style="float:left;margin-left:1px;" src=~img/head/acasa.png title="Acasa" /> </a> However, whenever I try to start the project in Visual Studio, I get the f ...

c#asp.nethtmlcss

Incorporating a hyperlink into an HTML submit button

Recently, I started working with MySQL and decided to create a basic registration page. However, upon clicking the submit button, I would like to be redirected to another page, possibly a login page as seen on many websites. I am struggling with figuring ...

phphtml

Techniques for transferring images directly into HTML canvas games

I created a thrilling race car game and here is the code snippet: index.html <!DOCTYPE html> <html> <head> <title> Extreme Race Car Game </title> <link rel="stylesheet" type="text/css" href="style.css"> < ...

javascriptjqueryhtmlcsshtml5-canvas

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

htmlcss

Ways to update text randomly without the need to refresh the page

Currently, I have a script that provides users with a random word. However, the only way to receive a new word is by refreshing the page... I would like to be able to set the words to change at specific intervals rather than needing to reload the page or ...

javascriptphpjqueryhtmltime

Locate a button element and dynamically assign an identifier using jQuery or JavaScript

I am currently working on a webpage that contains two forms, both enclosed within a <DL> element. <dl> <form action="" method="POST" style="display:inline-block;"> <dl><dt></dt><dd><input class="submit" typ ...

javascriptjqueryhtml

How can I limit user access to web content in Django with a daily usage allowance?

I am the administrator of an online pricing website built with Django. My goal now is to limit access to price information for non-VIP users. I want to implement a system where non-VIP users can only view prices on my website up to 3 times per day after l ...

javascripthtmldjango

Ways to create a clickable red button

I'm working with bootstrap, CSS, and particle.js for this project. I have also linked a custom CSS file here. However, when I apply bootstrap and particle.js, the red color generate password button becomes unclickable. After checking in Chrome dev too ...

htmlcsstwitter-bootstrapbootstrap-4particles.js

Transferring information from JavaScript file to an HTML document

Learning the basics of NodeJS. I have created a simple program that sends data back and forth between HTML and NodeJS files. In my index.html file, there is a form for user input and a div to display the response from server.js: <html> <body> ...

javascripthtmlnode.jsexpress

"Add some pizzazz to your website with Animate.css - Animate your

I am looking to create a dynamic effect where three words slide in and out individually. The first word should slide in and out, then the second word, and so on. How can I make this happen? Here's what I've tried: HTML: <p class="fp-animate ...

jquerycssanimation

Issues with JQuery onclick function on dropdown menu functionality not behaving as desired

Take a look at some example code here. Here's the HTML: <div> HTML<br> <li> <select id="Status" type="text"> <option value="New">New</option> <option value="Complete">Complete</option& ...

jqueryhtml