I'm having issues with backdrop-filter in firefox, but only when one of the parent elements has a border-radius and an overflow style on it. has anyone seen this before? any workarounds?
heres a codepen i made that shows the issue: https://codepen.io/dbillings16/pen/WNKEBMg
thanks in advance
tried adding backdrop-filter: blur(10px); to a div, expecting it to blur the background. it is blurred in chrome, but not in firefox
Related
In Safari, I'd like to use CSS to animate between position: relative and position: fixed. Yes, I know this is a discrete animation. That's what I need.
This works as expected in Firefox and Chrome, but not Safari. Is this a bug? Is there a way to make this work?
https://codepen.io/z5h/pen/XWmNBgK
This might be a common issue, but I couldn't find the answer. Best way to understand the problem is to look at this fiddle: http://jsfiddle.net/sxvjejvk/
Basically I have a div with a border-radius and overflow:hidden. Inside the div is an image. When I hover over the div, I want the image to scale, using a transition. However, the border-radius of the div breaks (it doesn't have rounded corners anymore) for the duration of the animation.
Adding -webkit-transform:translateZ(0) to the div fixes this in Chrome, but it doesn't work in Safari. Does anyone know if there's a fix for this?
You can fix it by adding webkit-mask-image for the parent element which has overflow:hidden
-webkit-mask-image: -webkit-radial-gradient(white, black);
Adding will-change: transform; to the overfow: hidden item works better for me on mobile Safari.
Adding border-radius to parent element while hovering works for me.
This is odd and I may be missing something blatant by my main navigation buttons on build.advocatedaily.com have a CSS background color transition associated with them on hover.
It works in Chrome, but in FX it's just refusing to comply. Interestingly, when I open a submenu and hover off the element, the background color reverts to normal using a transition.
Thoughts?
remove
position: relative;
from .mainnav li, worked here
firefox can be funny sometimes.
I'm working on a ticket system for my website and I have this unusual space at the top of the page for some reason in firefox, but not in chrome, opera, safari, or IE. Just firefox. Anyone know why?
Url:http://beta.campatet.com/tickets/
Check images below:
Chrome:
Firefox:
The h1 element is pushing the header down. Try adding clear: both; to the h1 element's css.
Try clearing your floats. (ul, li)
<h1 style='clear:both'></h1>
I would like to display an svg that flows over the screen but I don't want to see scroll bars. setting overflow:hidden in the body works for chromium and opera but not for Firefox 3.6. Anyone know a fix? Thanks.
html, body { overflow:hidden }
Works for me: http://phrogz.net/tmp/wide_svg.xhtml