I have a CSS problem in Firefox. I'm not 100% if it is a Firefox bug or is there a problem with the containers.
Here is the codesandbox where I've tried to reproduce the problem:
https://codesandbox.io/p/sandbox/heuristic-resonance-18bu96?file=%2Fsrc%2Fcomponents%2FNavigation%2FNavigation.css.ts
Here is a video with the issue:
https://www.youtube.com/watch?v=Q7MacY2maC4
Related
The background-attachment:fixed is working well on Chrome but on safari, it does not work. How can I fix this issue?
for fixing background image please use width and height css element and make sure background-image property use properly.
I have seen various mentions of a bug involving overflow:hidden and border-radius in Chrome around the web but none seem to have a solution that works for me.
I've put the relevant code here: http://codepen.io/jolora/pen/MadgQm
The hover transition effect works fine in Safari and Firefox but bugs out in Canary (v49. Chrome v46 is working fine).
If I remove the overflow:hidden rule from .service the hover works as expected. I'm using a blur filter though so I need to clip the blur somehow - I don't want it bleeding out the edges of the parent.
Screenshots:
Safari on hover (as it should look):
Canary on hover (the background of .service shows through in a square only during the transition period of 0.25s):
Any help would be greatly appreciated. Thanks!
What issue are you seeing and what should it look like? It looks alright to me in Chrome (not Canary)
With overflow:hidden -
Without overflow:hidden -
I'm trying to set up parallax using CSS perspective and translateZ, but getting some weird overflow errors in Firefox.
http://jsbin.com/fiviyefeme/1/edit?html,css,js,output
As you can see, when moving the mouse around, the background-image gets cropped. But I really can't see why they would do that. I've also tried using preserve-3d, but that only makes them dissapear.
Can only see a white background in the link that you provided. I have also checked the css and it doesn't have any background image on it:
body {
perspective: 800px;
}
Have you updated this?
Check this codepen: http://codepen.io/anon/pen/KkgeL/.
How come it's so glitchy when animating it? I'm on Chrome v.33. Works perfectly fine in Safari and Firefox (Safari glitches the same way as Chrome [read below], but instead of the width it's the height).
edit: I can try to explain the glitch for those of you who don't see it. It animates all properties somewhat OK, but at the very end of the animation, the width of the 3 divs instantly changes by a handful of pixels which is very, very undesirable.
For those of you who use Chrome and doesn't see the glitch please comment with your Chrome version.
I'm not sure yet of what is this about, but I added a delay on the transition of .logo > div and the problem was solved but I don't know if you can retain this transition.
Try it and let me know
-webkit-transition-delay: 1s;.
I've got a simple webpage with a centered background image around the main div. The background image renders fine in IE and Firefox, but on Webkit-based browsers (Chrome, Safari), the background image only partially renders when the page is initially loaded. It's almost as if the browser just quits trying to render it. If I resize the browser window, or click on any of the links on the page, the background image shows fully. Here's the site: http://www.jnrtunes.com.
I've tried various CSS hacks, preloading images, etc and nothing seems to fix the problem. Has anyone had similar issues? Is there a problem with my HTML or CSS? I'm a realtive noob to HTML/CSS, so any advice would be appreciated. Thanks!
For some reason, it's the overflow: auto on the #wrapper div that does it. Don't ask me why, but there seems to be your problem.