Issue with FiFO on MacOs causes skewed borders to not display correctly

I am currently facing an issue with my webpage and would greatly appreciate some help from the community.

My goal is to create a skewed border inside a div, similar to the example on this JSFiddle link: https://jsfiddle.net/kx6f9rsd/

.container {
background-color:purple;
height:100px;
width:100vw;
}

.container:before {
content: '';
position: absolute;
top: 0; 
right: 0;
border-bottom: 70px solid transparent;
border-left: 100vw solid yellow;     
width: 0;   
}

Although the skewed border appears correctly on all browsers, it seems to have an issue on Firefox for MacOS, displaying differently like this:

Is there a specific webkit/prefix that should be used when working with the MacOS version of Firefox?

Thank you in advance!

htmlcssmacosfirefox

Answer №1

Thank you for the helpful responses so far. I managed to resolve the issue: It was also present on my colleague's Windows 8.1 Firefox browser.

It appears that there is a problem with Firefox's antialiasing.

I'm not sure why it only affected those two specific Firefox installations. To correct the antialiasing, add the following:

-moz-transform: scale(.9999);

Now, my code snippet looks like this (https://jsfiddle.net/examplelink/):

.container:before {
  content: '';
  position: absolute;
  top: 0; 
  right: 0;
  border-bottom: 70px solid transparent;
  border-left: 100vw solid yellow;
  width: 0; 
  -moz-transform: scale(.9999);
}

So far, this solution has worked across all browsers used in our organization.

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 to display an image stored in Laravel within a Nuxtjs application?

I'm trying to display all images that are saved in nuxtjs using Laravel's storage feature. <img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" ...

htmllaravelvue.jsstoragenuxt.js

Using Angular to display exclusively the selected items from a list of checkboxes

Is there a way to display only the checked items in a checkbox list? I am looking for a functionality where I can select multiple items from a checkbox list and then have an option to show only the selected items when needed, toggling between showing just ...

javascripthtmlangularjscheckbox

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

jquery-uicss

The background of the body isn't showing up on the

I'm having trouble setting the background on my page. The background works for another div on the same page, but not on the body background itself. <!DOCTYPE HTML> <html> <head> <title>iDeas.com</title> <link rel=" ...

htmlcss

Transform JSON array containing identical key-value pairs

My array is structured as follows: [ { "time": "2017-09-14 02:44 AM", "artist": "Sam", "message": "message 1", "days": 0 }, { "time": "2017-09-14 02:44 AM", " ...

javascriptjqueryhtmlangularjsfrontend

Setting character limits within textareas based on CSS classes in a dynamic manner

I'm looking to develop a JavaScript function that can set text limits for multiple textareas at once using a class, allowing for flexibility in case specific textareas need to be exempt. However, I'm facing issues with my debuggers - Visual Studi ...

javascriptjquerycssdebugging

Achieve vertical alignment and responsiveness of elements in primefaces using css techniques

In order to vertically align 2 elements inside an outputpanel, I initially used a margin-top of 3em. However, this method proved to be non-responsive, as shown in the following images: https://i.sstatic.net/yMRXc.png In mobile view: https://i.sstatic.net ...

htmlcssprimefacesstylesxhtml

Issue with Firefox causing Bootstrap form to appear incorrectly

I recently created a customized form using Bootstrap, but unfortunately, I'm encountering an issue with Firefox. Despite functioning perfectly on other browsers, the radio buttons are being pushed off the edge of the page and aren't displaying pr ...

javascripthtmlcsstwitter-bootstrap

Adjust the size of the input field as text is being typed in

Can a text input box be automatically resized as text is entered? I've been looking online but haven't come across any solutions. ...

javascripthtmlcss

Seeking to have text spill over into a different container

Novice in CSS seeks advice. I've nailed the layout of the home page for my website with two divs</p> <p><div> <div> <pre class="snippet-code-css lang-css"><code>#desktop-navbar { text-transform: uppercase; ...

htmlcss

Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the backgro ...

htmlcsstwitter-bootstraphtml-table

Do not use Express.js to serve the index.html file

Encountered an issue when attempting to run my Express.js solution. Instead of opening my desired index.html file located in the client directory, it kept opening the index.jade file from the views folder with the message "Welcome to Express" on the browse ...

javascripthtmlnode.jsexpressnpm

Having trouble with webpack displaying CSS background images?

I've set up the html boilerplate using webpack. I'm currently encountering an issue where calling an image in my scss file like "background: url('/img/img.png');" isn't working. I've included the webpack file and folder struct ...

javascripthtmlcsswebpack

Combining and removing identical values in JavaScript

I need to sum the price values for duplicated elements in an array. Here is the current array: var products = [["product_1", 6, "hamburger"],["product_2", 10, "cola"],["product_2", 7, "cola"], ["product1", 4, "hamburger"]] This is what I am aiming for: ...

javascripthtmlnode.jsarrays

Use the resizable function for widths greater than 1024px

I have a resizable function on my page: $(function() { $( "#droppable" ).droppable({ create: function( event, ui ) {$( this ).hide(0)} }); $( "#droppable" ).on( "dropover", function( event, ui ) { $( this ) $( this ).text('¿Eliminar?&apo ...

jqueryhtmlcss

Tips for aligning the box beside another

How can I arrange 2 boxes in one line and the other 2 in the next line? Currently, they are all showing up on separate lines. Can anyone provide a solution to this issue? body{ background:#f4f4f4; color:#555; font-family:Bahnschrift SemiCond ...

htmlcss

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

htmlcssbootstrap-4

Arranging several lists in a row without any specific order

I am trying to arrange multiple <ul> elements on the same line to create a shop-like display for products. Currently, I have set up several unordered list tags: ul { display: inline; } li { list-style: none; } <ul> <li>& ...

htmlcss

Accessing variables within a frame using JavaScript.Is there a way to access variables within

I am having trouble accessing a Frame that is included within a frameset. The structure looks like this: IFRAME \ FRAMESET \FRAMESET \ FRAME I have been struggling to find a solution, I can only access the iframe ...

pythonhtmlframepamieframeset-iframe

Div remains fixed while scrolling until the footer is reached

Hi there, I could really use some assistance with a jQuery issue I'm facing. I've been watching tutorials in an attempt to find a solution, but being new to jQuery, I'm struggling. My goal is to scroll a fixed div down the page, however when ...

jqueryhtmlscrollfixed