Hey there! I'm having trouble with a CSS shape that is supposed to look like a new moon. It displays perfectly in Chrome and Firefox, but in Safari, the outline of the entire circle is showing up. Does anyone know how to fix this issue and make the new moon shape work correctly in Safari?
https://i.sstatic.net/ay8Tt.png
Here is an image of the current result in Safari:
.circle {
height: 50px;
width: 50px;
border-left: 10px solid red;
border-radius: 50%;
}<div class="circle"></div>It seems that there is a glitch in the way webkit handles borders with border-radius set only partially.
Here's an alternative approach using box-shadow instead of borders. I find this method achieves a similar visual effect:
.circle-box-shadow {
height: 50px;
width: 50px;
margin-left: 10px;
box-shadow: -10px 0 0 red;
border-radius: 50%;
}
.circle-border {
height: 50px;
width: 50px;
border-left: 10px solid red;
border-radius: 50%;
}<p>Using <code>box-shadow</code>:</p>
<div class="circle-box-shadow"></div>
<br>
<p>Using <code>border</code>:</p>
<div class="circle-border"></div>This has been tested in Chrome version 70.0.3538.110 and Safari version 12.0.1.
I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...
Can someone guide me on how to use Selenium for printing a webpage? import time from selenium import webdriver # Setting up the WebDriver chromeOps=webdriver.ChromeOptions() chromeOps._binary_location = "C:\\Program Files\\Google&bsol ...
My goal is to display 4 images/company logos per slide, but they all end up clustered on one slide. Despite my efforts to adjust the CSS, nothing seems to work. This is what my code currently renders: https://i.sstatic.net/ThaOK.png Here are the react co ...
Everyone is familiar with the fact that HyperLinks have a navigateURL property which redirects you to the linked destination when clicked, which works well. In certain visual cases, LinkButtons are similar to Hyperlinks but do not have a navigateURL prope ...
Has anyone else experienced the issue where the bootstrap 3.3 carousel (code from getbootstrap.com) moves up to the top of the browser every time you navigate/slides with the controls? For example, if the carousel is in the middle of the page and you manu ...
Having 2 containers and wanting them to have the same height has been a challenge. I've been experimenting with flexbox and the flex-direction: column (flex-column) property, but I can't seem to get each element to divide the available container ...
After scouring numerous sources on the web, I have found various tips for centering a div. However, no matter what I try, there seems to be a persistent white space to the left of my div that I just can't seem to resolve. If you're curious, her ...
Is it possible to use a time variable instead of a CharField for a model that displays multiple saved times? The issue I'm facing is that it shows as "9 am" instead of "9:00 am", and "noon" instead of "12:00 pm". Can anyone provide assistance with thi ...
In my fresh Vue project, I have the following code: App.vue: <template> <div id="app"> <p>hello</p> </div> </template> <script> export default { name: 'App', components: { } ...
Hi there! I've been working on adding some CSS code to my ReadyMag project, but I'm having trouble with odd aspect ratio browser windows. The code I have is almost doing what I want, but it's not covering the full width and height. How can I ...
My webpage features multiple accordion items that dynamically pull information from a JSON file. Initially, everything functions flawlessly, but when utilizing the filter option, the items are correctly filtered; however, they no longer expand or collapse ...
I have built a table using 'div' elements that contains dynamic content based on user choices and data to be displayed. My goal is to be able to click on icons in the last row of the table. Unfortunately, I am unable to achieve this using getEle ...
Currently, I am working with Angular 2 using a SCSS style. My challenge is to retrieve data from a server in order to change a specific variable within the component's style - specifically a percentage value. You can view the SCSS and HTML code here. ...
Using an anchor tag to navigate to a specific section within the same page works perfectly when the HTML file is on my local machine. However, when I attach the file in Gmail and open the attachment, it doesn't work. Why is this happening? How can I m ...
I am facing a challenge with arranging three columns in a row: Interested listings | Basic profile | Connections However, when the screen size is reduced to that of a phone, they should be stacked like this: Basic profile Interested listings ...
Creating an image map can be a tedious task, especially when dealing with complex shapes that require pinpoint accuracy. Is there a tool available that simplifies the process by allowing easy plotting of points for mapping? ...
I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and b ...
Currently, I have this jQuery code: $(".car-hub-header-help").click(function() { $('html, body').animate({ scrollTop: $(".footer").offset().top }, 2000); }); Right now, when this runs, the page will scroll down until the top of ...
I am encountering an issue while attempting to import createGlobalStyle from styled-components. Despite having installed the styled-components npm package with version @3.4.10, it doesn't seem to work as expected. const GlobalStyle = createGlobalStyl ...
On my webpage, I have a section for creating content, as well as a top bar and sidebar with internal links (both controlled by ng controllers). I am looking to implement a confirmation message that will appear if the user tries to leave the page while in t ...