I am experiencing an issue with a CSS animation where I have an element that fades and child elements with a backdrop-filter to blur the background in Safari.
There are two specific problems:
The element's rounded borders are showing dark shadows in each corner.
When the element is fading in, the blur effect does not appear until the fade animation is complete.
To see a demo on Safari and iOS Safari, visit:
One solution is to remove the backdrop-filter to eliminate the artifacts in the corners.
Unfortunately, I am unable to replicate the problem you are experiencing since I do not have access to iOS devices. However, a potential solution for resolving border-radius issues is by including the following code:
#YourElement{
perspective:1px;
}
Ensure to add this to the element with rounded corners and test it out. Feel free to provide us with any updates on your progress.
This issue has been identified as a bug specific to Safari, but luckily it has been resolved in Technology Preview 6:
Learn more about Safari TP 6 here
Despite this fix, the second issue remains unresolved.
My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...
Specifically, I am having trouble getting the block to rotate properly. Currently, the block only rotates once when clicked, but I want it to rotate each time I click in both directions. Any suggestions on how to achieve this? var now = 10; $('. ...
How can I center the content in each section of my webpage? Here is an image for reference: https://i.stack.imgur.com/PHEXb.png I want Section 1 and Section 2 to be 100vh with the content centered on the page. .content { height: 100vh; } <!do ...
I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...
I've got a collection of student links that take users to their profiles, and I want to replace the usual circular bullet points with smiley faces. Each picture is 14x14 pixels in size. How can I use CSS to achieve this effect for the bullets? ul { ...
My issue is very similar to the problem described in this post: CSS Flyout menu gets cut off by borders of its container in IE9 The difference in my case is that I need to set the z-index (and position) on the container. You can view my JSFiddle here: h ...
I'm currently utilizing the vuetify grid system to construct a reply component. The column ratio is set at 1:11 for the icon and reply columns, respectively. Below you'll find the code snippet: <v-row justify="center" class="ma-0 pa-0"> ...
I am struggling to get the second div (right-column) to move next to the first div (left-column) in order to create 2 columns of links. I would prefer not to create a separate stylesheet for this small page. <div class="container" style="height: 700px; ...
My website currently features a grid that can have anywhere from 1 to 3 columns. To ensure flexibility in the number of columns, I am using auto-fit: .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr)); gap: 40px; ...
I have a question about incorporating user input text into CSS styling. Specifically, I am looking to create a color background option (#ffffff) where the designer can input their own color and have it displayed once saved in the body background style. Wh ...
Currently, I am facing an issue with Vue's default behavior where only one v-list-group can be open at a time. I am using Vuetify 2.6 and have attempted to use the multiple prop without success. Additionally, individually assigning the :value prop to ...
Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...
I am attempting to modify an au generated HTML code, for example: <div class="intro editable" id="field_text">text <strong>text</strong> text <span style="text-decoration: underline;">text</span> <span style="color: #ff00 ...
After experimenting with the design of my input file using this code snippet, I am facing difficulties aligning the button within the text input of a bootstrap element. Below is the code I have used to style my input field, but unfortunately, the bootstra ...
I need to find a way to make horizontal scrolling on my really wide graph snap to specific points along the x-axis. I initially tried using scroll-snap-points-x, but unfortunately it doesn't seem to be supported. My attempt to add invisible elements ...
Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...
In my layout, I have a column on the right with <IndustryList />, and I want everything in the other <div> that contains <ParameterAndPostSearch /> and <SocialPostList /> to extend to the bottom. However, no matter what I try, setti ...
For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more. I require assistance in creatin ...
Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...
Is it possible to create an animation that runs infinitely every 15 seconds in the sequence 1, 2, 3, 4, 3, 2, 1 with different delays for each item using CSS? The animation delay seems to only work on the first iteration. Achieving this effect is easy wi ...