I stumbled upon a weird behaviour in Safari today, and I cannot figure out what causes the problem.
When creating an animation that rotates an SVG element in a certain pattern, with everything working perfectly fine in Chrome, Safari only shows half the SVG on every animation step.
When I remove the background-color: white; from the .container element, everything works fine. How would a background color be causing such a behaviour?
Here's a demo video as well as the corresponding JSFiddle:
JsFiddle: https://jsfiddle.net/04zgmbup/
Chrome (expected):
Safari (unexpected):
Okay, so apparently I got this problem figured out.
Safari seems to be handling the container background as a plane.
This means that when the item rotates, one half will always get rotated behind the container, which has a white background color which covers the element itself.
I still do not know why other browsers do not behave like this.
A possible solution for Safari could be to translateZ(width /2) the element, so that all rotations happen in front of the background plane.
Here's the updated fiddle, working in Safari:
https://jsfiddle.net/04zgmbup/1/
The problem can be visualized nicely by giving the container a semi-transparent background color. In the below recording, one can clearly see that half the circle gets rotated behind the container.
Related
I know there might be plenty of other topics about SVG background-images and browser compatibility, but i really can't find out any solution to my problem. I'm using Foundation 5.
So, I've got three divs in a row. Each div has a svg as a bg-image.
See, on Chrome, works perfectly:
Chrome capture
The svg background isn't the bubble itself but the surrounding, that I filled with blue ( so bg-color is white ).
But if I go on Safari, there is a small white line on the border of my divs : Safari capture
I'd like to get rid of this white line on safari. I mean, I want my row to display as in Chrome. So, I know background images width in safari are set in px, and that mine are set with %. But I don't really think it has something to do with it. I really have no idea of how I can resolve this.
On a website I'm working on I got images inside a container that need to zoom on hover. This works smooth BUT..
Whenever an image zooms in or out (when transition is kicking in) the image get's out of the container for the time of the duration.
I've adde overflow:hidden but it doesn't seem to work.
You can find the webpage in action over here: http://avdj.mtdev.be/drukwerk/
There is a known bug in Webkit-based browsers - see #62363.
add opacity: 0.99; to wpb_content_element to workaround this issue.
I have a website where I want a linear-gradient to scroll indefinitely to the left. I have it working perfectly right here on codepen: http://codepen.io/spikeyty/pen/oqBFi
It appears that the gradient is there, but it is not moving. I copied the code straight from codepen. Here is the website I'm adjusting: http://tystrong.me
It isn't working in Chrome, Firefox, or Internet Explorer. Any help is appreciated!
Your media query on line 99 (code pen) is wrapping the declaration of the bg-move animation property so it does not exist at the desktop view.
Also - bit of a protip, you don't need to specify from in your animation declaration when it is the default state of the element already.
BTW - sweet little effect!
In this codepen example: http://codepen.io/DrYSG/pen/ovctn I created three flexboxes. The effect I want is that when one hovers over the middle box, it grows in size (color change in the demo is just to help me know about the hover).
In FireFox v19 this almost works correctly. But it is strange what it picks of the start and end widths of the animation.
In Chrome v25, I am getting rapid unstable oscillation of states (flashing). Really not correct.
In IE10 I get the same transition as FireFox, but no smooth transition.
Hi I'm having troubles with a problem in chrome. I think it might be a bug but I can't find much info on it. Basically I want to apply border radius on an image. The border-radius will be 50% forming a circle. The reason I've set it as a % is because i wont explicity know the width/hieghtt of the image.
Any ideas why chrome doesn't display the border correclty? I haven't tested in FF < 4. but FF4 works well as does IE for a change
What are you trying to do? Do you want a circle to appear behind the image? That is what I see in FF. In Chrome, the circle is clipping the edges of the image.
According to the spec -- http://www.w3.org/TR/css3-background/#corner-clipping -- content is supposed to be truncated.
The content of replaced elements is
always trimmed to the content edge
curve.
Which, to me, means that Chrome is following the spec correctly on this.
Webkit doesn't currently clip corners of images. Remove the src tag from the image and you'll see that the border is being rounded correctly.
One workaround is you could set the background-image property in css: http://jsfiddle.net/tEzwJ/
I figured out a way around it, by adding the border and the border-radius onto the parent . I then applied the border radius to the image too. Although there is a minute gap It works in chrome now. I haven't tested it in FF3.6. But FF4 displays the same result