Here's a tricky puzzle for you. The gradient below is not displaying correctly in Safari, but it works perfectly fine in Firefox and Chrome:
background: linear-gradient(transparent 124px, #de6230);
I've even attempted the following fix without success:
background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);
If you test it on Safari using this jsFiddle link, you'll see the issue: jsFiddle.
Can anyone help me solve this problem?
Give this a try: background: linear-gradient(rgba(255,255,255,0) 124px, #de6230);
Update: Apologies, OP, the previous code didn't quite achieve your desired gradient effect. Although the colors were correct, the gray middle turned to white. I discovered a solution that works:
background: linear-gradient(rgba(222,98,48,0) 124px, #de6230);
The rgb value of 222,98,48 corresponds to #de6230, so this should provide the result you're looking for. The gradient transitions from your color at 0% alpha to your color at 100% alpha.
Here is a suggestion to try:
background: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);
You can also replace background with background-image
background-image: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: linear-gradient(rgba(255,0,0,0) 124px, #de6230);
I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser. One specific problem involved styling the head ...
I am experiencing a peculiar issue that has left me puzzled. p { padding: 0; margin: 0; } .fc { display: flex; flex-direction: column; } .fc > article { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #000; ...
Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...
Currently, I have integrated a Radix UI's Alert Dialog in my Next.js 13 app to confirm the deletion of a contact from the user's contact list: Take a look at the Alert Dialog modal here However, there seems to be an issue with the delete button ...
I'm attempting to extend a textarea by adjusting the margin-top property, but it doesn't seem to be working as intended. Here is the code snippet in question: #sqlcontainerLoggedInPage2 { margin-top: 60px; } <div class="container-fluid" i ...
Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...
Looking for a solution to scroll to a specific div when clicking on a tab in Material UI Tabs using UseRef and ScrollTo. Check out the sandbox link here: https://codesandbox.io/s/exciting-sound-mrw2v Currently, when I click on Tab 2, I expect it to autom ...
As a beginner in CSS, I am experimenting with creating a simple website using HTML and CSS. However, I have encountered an issue where the links on the left side of my page are being interfered with by a paragraph in the middle section. This causes some of ...
Currently working on creating a new property named startPosition and setting the top property to equal the button's current top value in CSS. Below is the jQuery code snippet: var morphObject = { button: $('button.morphButton'), c ...
I am working on an Ionic project and I have a list of items. I am trying to change the background color of the pressed item. Can someone help me with this? index.html <ion-list> <ion-item ng-repeat="item in familleItems"> <div ng- ...
I am designing a webpage where I have set the container width to 100% to cover the entire screen width. Inside this container, I have multiple DIVs arranged in a grid structure with a float: left property and no fixed width, just a margin of 10px. Is ther ...
Seeking a sleek CSS grid system that is percentage-based with 12 columns and works well on IE6+ as well as all modern browsers. Support for nested columns would be a bonus but not mandatory. Many grids out there lack compatibility with IE6 or are based sol ...
I am currently utilizing an if-else statement to display different HTML structures. As a result, the entire HTML is being rendered twice. Is there a way we can utilize 'display: none' instead? I attempted to use it in th ...
Just starting out with web development, and I have a div element with the following attributes: <div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset= ...
Currently, I am in the process of developing a web application utilizing Google Maps API and ASP.NET Ajax. Below is the JavaScript code I have implemented for the PageLoad: map.openInfoWindowHtml(map.getCenter(),'Hello, <b>world</b>!&apos ...
I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...
I recently encountered a challenge with my Bootstrap navbar where I needed to remove the background. To achieve this, I applied the class "navbar-fixed-top" to the main wrapper. <nav class="navbar navbar-fixed-top"> After making this change, the na ...
As someone who is new to the world of coding, I have a few goals in mind: First and foremost, I want to create a canvas. I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images ...
<img src="the fake.png" width="3268" height="538" class="table" alt=""/> I have a large image that is getting cut off on the page. I need to add a horizontal scrollbar so I can view the entire image ...
Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...