In Safari, use a reversed angle for a -webkit-linear-gradient

While searching for a CSS solution to create a uniformly colored element with an angled start without using images, I came across a simple example that caught my attention: . This method works well in most browsers, but I encountered an issue in Safari where the angle is reversed and placed at the end instead of the beginning. The inconsistency in Safari has puzzled me, especially since all other browser versions are displaying correctly with the same values.

Does anyone have any insights on why this might be happening and how to resolve it? Or perhaps suggest an alternative approach to achieving an angled left side of an element without relying on images?

csssafarianglelinear-gradients

Answer №1

There have been significant alterations between the Working Draft and the Candidate Recommendation for the gradient syntax, one of which pertains to the angle of the gradient:

As stated in the IE Blog, the unprefixed version requires a distinct deg value compared to the prefixed versions. The CR presents a more coherent approach, where 0deg signifies a gradient line pointing upwards and progressing in a clockwise manner.

Answer №2

It seems like you've stumbled upon a bug! Or perhaps Safari is interpreting the angles differently.

This discrepancy isn't unexpected considering that Safari used the -webkit-gradient syntax until fairly recently, which is notably less versatile. One limitation of this syntax is its inability to handle angles.

However, you can address this issue by incorporating the old syntax, which is still functional:

  background: -webkit-gradient(linear, 10% 100%, 0% 0%, color-stop(80%, #000000), color-stop(80%, transparent));
  background: -webkit-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: -moz-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: -o-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: linear-gradient(60% 100%, #000000 80%, transparent 80%);

Take a look at the demo 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

Seeking assistance in optimizing my Javascript code for more efficient canvas rendering

I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (althoug ...

javascripthtmlcssanimationcanvas

Unable to create a flawless circle using Canvas

No matter how hard I try, drawing a perfect circle seems impossible for me. Every time I attempt it, all I manage to create is an ellipse. Check out this code snippet I put together as an example: function canvasClicked(number) { var c = "canvas" + nu ...

javascripthtmlcsscanvas

Position the read more buttons in JavaScript at the bottom of the div

I designed three boxes in this section with content inside. To enhance the functionality, I added a feature that made the boxes smaller. Everything was functioning perfectly, but I encountered an issue with the alignment of the buttons at the bottom. Is th ...

javascripthtmljquerycss

What is the best way to position this material-ui select list at the bottom of the input block for proper alignment?

My material-ui select build is working fine overall, but I'm looking to align the top line of the select list with the bottom line of the input block. Any ideas on how to achieve this? This is my code: const styles = theme => ({ formControl: { ...

cssreactjsmaterial-ui

What is the method for creating a checkbox in CSS that includes a minus symbol inside of it?

Can you create a checkbox with a minus "-" symbol inside using just html and css? I attempted to achieve this with JavaScript by using: document.getElementsByTagName("input")[0].indeterminate = true; However, the requirement is to accomplish this using ...

htmlcss

Creating a capsule-shaped button using HTML and CSS:

I'm trying to create a button that mimics the design in the code snippet. Is this method the most effective way, or is there a simpler approach I should consider? It seems like a lot of work just to achieve rounded corners. #p1,#p2{ height:25px; ...

htmlcss

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

Is it unwise to conceal the horizontal scrollbar?

My webpage includes a jquery slideshow using the jquery circle plugin, featuring the "shuffle" option. var slideshow = $('#slider').cycle({ fx: 'shuffle', shuffle: { top: 0, left: 1300}, .... When the images move out ...

jqueryhtmlcssscrollbar

a text input field with an invariable placeholder inside

I'm attempting to design a textarea with a consistent title in the top left corner. Here's what I have so far: <div style="position: relative"> <div style="position:absolute; top:3px; left:3px; font-size:9px; line-height:10px">My ...

csstextareapaddingfixed

Adjusting distinct column widths based on categoryID

Is there a way to assign different CategoryIDs (1, 2, and 3) based on certain conditions and work with varying column widths within <div class="Meta1">? I need to add 2 more CategoryIDs. Any suggestions on how to achieve this? Thank you. if ($ ...

phpcsswidthcategories

What is the best way to design a content page with linked boxes to various arrays in PHP?

How can I create a PHP menu template that navigates to different pages? I am new to PHP and still learning. I want to achieve something similar to this image: https://i.stack.imgur.com/ylfe8.jpg I have the code for the navigation bar, but I need help crea ...

phpcsshtmlnav

I am working with three columns and I am looking to keep the center column fixed in place while scrolling

Check out this CSS snippet: #container { margin: 0 auto; width: 1200px; } #col1 { float: left; width: 700px; } #col2 { float: left; width: 100px; padding: 0 17px; } #col3 { float: left; width: 400px; } I am trying t ...

htmlcss

What is the best way to decrease the width of one of the four columns?

I trust all is well with you. I'm having trouble adjusting the width of one of my table data cells. In the image attached below, you'll notice that my + icon is the same size as the other columns. I'd like to make it much narrower and posit ...

htmlcss

adjustable backdrops

Hi there, I'm trying to create a background image that resizes with the window while maintaining its proportions. I want to achieve this using CSS only. I've been searching for a solution but haven't found anything that works for me. I even ...

css

The compatibility issue between Jquery highlight and show more/less function is causing them to malfunction when used

I am facing an issue where, while trying to search for a specific word to highlight it, the "show more" button closes and only displays the text prior to clicking the button. How can I ensure that the expanded content remains open while searching for a wor ...

htmljquerycssbootstrap-4

Attempting to dynamically resize SVG images based on the size of the window for better scalability

I have a container that contains two SVG images. I want both the container and the images to adjust their height based on a percentage of the viewport size, while staying within a specified min-height/max-height range (and maintaining the aspect ratio of t ...

csssvgbootstrap-4

Tips for ensuring consistent alignment of the final navigation item

I'm having trouble understanding why the layout collapses when I resize the window horizontally. I've attempted to adjust the width of the div and tried using display:block. My website is built with Bootstrap 3, although I don't believe that ...

htmlcss

How can I create a one-column layout in CSS grid where one element automatically fills the remaining space after the other elements have taken their own auto widths?

I want a flexible layout with auto width columns for future additions. Avoiding extra wrappers is preferred. CSS grid is the preferred method over flexbox (although flexbox can achieve it with wrappers). This layout is intended for a navigation bar Here&a ...

htmlcsscss-grid

Center Checkboxes in Bootstrap 4 Form Input

I am working with a Bootstrap Form that contains checkboxes. One specific scenario involves a large number of options to choose from. Currently, these options are displayed in a single long list, which can make it difficult for users to read and select the ...

htmlcssbootstrap-4

Why Does My Bootstrap Borderless Table Still Show a Border?

Just starting out with Boostrap and struggling to identify what might be causing this issue on my Create view and how to resolve it. https://i.sstatic.net/nWNkc.jpg Below is the relevant section of my view: <h3 class="text-primary pl-3"> ...

cssbootstrap-5razor-pages