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.
Related
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.
I have a problem doing pixel-perfect center icon inside colored block with round edges. Icon changes left-right offset on browser window resize.
Open for example Chrome or Safari with https://github.com/facebook/react
And try to resize width of browser window very slowly (by pixel).
You will see a little changes (1-2px) in offset between icons and it's titles in buttons (Watch, Star, Fork).
The same happens with icon inside colored block with round edges.
Why it happens? And how to prevent it?
p.s. Initially, I ran into this problem developing a electron app, but it appears everywhere.
p.p.s. May be there is any webkit option to change rendering method, that will prevent such trembling on resize?
Problem solves by adding
transform: translate3d(0px,0px, 0px);
to icon styles
but it slows rendering on page scrolling :(
Why when I hover mouse on cards image moved ?!
I am trying to fix it and I find when I remove page direction and or remove overflow-y from #center it's fixed but I need them !!
even when I inspect elements in cards and mouse hovering could to see all elements are moved but shown correct ! I guess it's maybe page rendering problem in chrome browser
in fact what is problem and how can I to fix it technically ?
JSFiddle Demo
This issue appears to be a Chrome bug according to this topic:
image moves on hover - chrome opacity issue
and I think you should setting position:relative to inner img solves the problem
I'm trying to create a parallax website. But then I have an issue with fixed positioning.
I have several sections , each with a background-attachment:fixed.
A position:fixed menu bar on the top with an hidden element in it on top of all sections.
A google map 100% with in one of the sections.
Now, the problem is when I scroll the page with animation in google chrome, the scrolling does not go smooth and it flashes several times while scrolling.
I do the scrolling with greensock scrollTo plugin , but that is not the problem as I also tested it with jquery .animate() method. Same result.
I did a research , and found out that chrome has a bug or problem with Fixed positioning ( and sometimes when you put hidden element in it )
Some pages suggested to use these two with the fixed elements :
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
I added this to the fixed menu and some of the choppy behavior of it reduced , but still not smooth.
If I add this to the sections with background-attachment:fixed elements, the scrolling animation goes smooth but does not act as fixed anymore.
Somebodies says that chrome has problem with large images, some says it has issue with fixed position and somebodies had a solution that did not work for me :D
I uploaded the page :
http://www.FarzanMohajerani.com/test/parallax
just click anywhere on the page to scroll.
I also created a jsFiddle with the exact same code. But I don't know why it doesn't have the problem in jsFiddle :
http://jsfiddle.net/Farzanmc/cRqxT/5/
It would be great if anyone could direct me to the right solution or remind me if I'm doing anything wrong.
Thanks
This solved the issue for me:
-webkit-transform: translate3d(0,0,0);
Adding this rule turns the element into a layer in Chrome, which avoids repainting. In my unique situation the error was caused by browser re-painting.
I', having the same problem with Chrome at the moment and I narrowed down the cause to the following combination:
1) background: fixed;
2) transform: (any transform, even just putting scale(1), would instantly break it).
As long as an element that contains fixed background image doesn't have any "transform" on it, it works fine. But as soon as you even add "transform: scale(1);" which doesn't actually make any real transformation, it completely breaks the fixed background image. You can start scrolling, but it disappears. If it was outside of the screen, it will never appear at all, no matter how far you scroll.
So essentially, the problem is that Chrome at the moment can't handle fixed background images in transformed elements. No matter which level of descendent or ancestor we are talking about.
The thing is, this is pretty much an essential stuff that and I'm really hoping that it gets fixed as soon as possible, because it's extremely limiting. You can't disregard Chrome as if it's IE6.
And you can't apply "position: fixed;" on an "img" element, because it will be fixed to the first "transformed" ancestor, not to the real screen, since that's apparently how it's supposed to be treated, according to W3C. Although, some new value would be welcomed, some that can break all the way to the very window, and fixit to those coordinates.
I ran i to a same problem and fixed it this way:
I had to deal with fixed header on a website and anytime i would scroll with a mouse wheel the header would get choppy.... I had a display:none element in a header and as soon as i removed the element, header became fixed and steady, now it displays well no matter how fast i scroll.
I have a CSS3 transition opacity on a image responsive image (max-width: 100%) contained in tag, on hover it changes size fractionally and then goes back to normal, when you remove the cursor it again does the same adjustment, I can't see anything which would cause this to happen. Using the chrome inspector turning styles off and on it vanishes when either opacity or the transitions are toggled off
Can anyone shed any light on this?
At first see this answer enter link description here
The second, try to check element width, if it's 300.12px (float number width), try to fix width so it would be rounded.
Sometimes this problem dissapear after applying position:relative to the image.
Chrome has bugs. So there could be other solutions, and problems with that. It might be so, your case has no solution. Like round corners + zoom animation.