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.
Looking to create a smiley survey using only Front-End technologies. Once a radio button is selected, the associated content should appear for comments. Currently, I have set up my CSS with display: none. I attempted to implement this functionality using ...
I'm having trouble positioning icons next to each other horizontally and they keep stacking on top of one another. Can you please review my CSS code to see if I made a mistake? Here is the CSS: #social { top:20px; left:30px; height:32px; width:200p ...
After thoroughly reading all the @media topics on this site, it appears that the code should be functioning correctly. body { background-color: yellow; } @media screen and (min-width: 1080px;) and (max-width: 2000px;) { body { backgrou ...
On my website, I implemented Foundation's Magellan sticky menu at the bottom. Strangely, when I view the site in Firefox, the menu functions properly. However, when I try to open it in Google Chrome, the links don't work (and the cursor pointer d ...
I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...
My dilemma is as follows: I have a line within a document that has a set width. Now, there are 3 elements involved - one <a> tag and two <span> tags. The content in the <a> tag varies in width each time it appears on the line. The thi ...
Struggling with changing the border color for Tab 2, while Tab 1 works fine. All my custom CSS comes after Bootstrap 5 CSS, so why isn't it overriding the changes? CSS .nav-tabs { border-color: black; } .nav-tabs > li > a { border-colo ...
I'm currently working on a project that requires implementing custom-style tabs. I'm facing challenges in customizing the borders of the tabs, particularly rounding the red bottom border and adding space between the right border and bottom border ...
Is it possible to style different words in a sentence with various colors using only CSS, without using the span element? For instance, how can I make the word "Red" appear in red, "Blue" in blue, and "Green" in green within an h1 tag? ...
Is there a simpler way to convert my OTF/TTF fonts to EOT format for Microsoft browsers' @font-face feature? I attempted using the WEFT tool but without success. Any alternative methods available? ...
Explaining my issue is a bit complex, so I'll provide an example: I aim to place a floated element (the blue box) over two other elements (red and green), all within a fixed-width and centered layout (achieved by the black border box). Additionally, ...
I can't seem to figure out why the border I applied to a child div is not completely enclosing the element. I created two boxes using div tags and added a border to one of them. #box { height: 500px; width: 500px; background-c ...
htmlCODE: <div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0"> <div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; h ...
I've come across numerous versions of this question, but none have been successful for me. I'm attempting to achieve rounded corners in IE8 similar to what I see in Firefox and Chrome. Below is my CSS code after integrating css3PIE: border-top- ...
I am not a big fan of bootstrap, so I was wondering if it is possible to achieve the layout without using it. I have 6 divs that I want to arrange in 2 rows and 3 columns. I need the space between each row/column to be precise. While I can calculate this ...
This code contains the HTML portion <li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li> Below is the CSS code .navs:after { content: ""; position: ab ...
For some reason, using button .order{} to select elements inside the button is not applying the CSS codes as expected. The text color remains unchanged. However, when using just `.order` to select the elements, the CSS code works perfectly fine. Can someon ...
I have a question about how to design a custom input slider with the label inside the field itself. The desired output should look like the screenshot below: I have successfully created the input field part, but I am struggling with adding the label and ...
When building a webpage with a collapsible header and a fading large logo that transitions to a smaller version in a different location upon scrolling down on the desktop view, there seems to be an issue. The smaller logo's opacity property does not r ...
HTML and CSS .pickthetime { height: calc(var(--vh, 1vh) * 3); width: calc(var(--vw, 1vw) * 25); align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS font-weight: 300; } <input cla ...