I am experiencing some weird issues with CSS scale transitions. The scaling works fine, however there are some weird lines around the scaled element, which disappear after scrolling. This happened in a Chrome browser and in Microsoft Edge. And I don't assume it has something to do with margin, padding, the z-index, colors or anything else along those lines, because it happened with and without these properties being included in the relevant CSS.
This is the relevant CSS as a quick draft:
.element {
background-color:black;
transition: transform 0.5s;
transform:scale(1, 1, 1);
}
.element:hover {
transform:scale(1.1, 1.1);
}
Here is a quick recording to demonstrate that: https://streamable.com/cyvkjm
Here is also a screenshot for those who can't see the video for some reason:
Your streamable link worked fine for me. I remember having a problem similar to that a while ago, and it was something to do with using 3d scaling
Check this out though, I'm fairly certain backface-visibility: hidden and the -webkit equivalent will fix it. As I can't reproduce this I can't be of much more help
CSS transition on element leaving lines
Edit: after reproducing the problem we found a fix. Tested and works in Chrome/Edge/Firefox. perspective(1000px) seems to work better than perspective(0)
.element {
transform: scale(1) perspective(1000px);
}
.element:hover {
transform: scale(1.1) perspective(1000px);
}
Related
I did setup an HTML page where I use z-index to set the elements "visual" order.
It works as expected; but breaks when I use transform: scale().
#blocks-both{
transform: scale(0.9);
}
I make a simplified example here : http://codepen.io/anon/pen/LNYrar
I read a lot of messages regarding this particular problem, but I can't find a solution to make my design work.
I guess I don't understand something regarding this.
Could someone help ?
Thanks !
This is a known issue:
css z-index lost after webkit transform translate3d
webkit-transform breaks z-index on Safari
webkit-transform overwrites z-index ordering in Chrome 13
You can read more about it here as it offers in depth explanation.
In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
You could avoid this issue by moving the transform properties from #blocks-both to #block-main and #block-sidebar like this:
#block-main, #block-sidebar {
transform: scale(0.9);
}
#block-main {
transform-origin: 100% 0;
}
#block-sidebar {
transform-origin: 0 0;
}
I've also edited your example.
I'm trying to apply some CSS3 transitions on some headers in a website I'm working on, but there's something about transitions on elements that contain text that really bugs me: in browsers that apply hinting or grid-fit a font's glyphs (which I guess is most of them, bar perhaps Safari), there is a noticable 'jump' at the beginning and end of a transition where you can see that text is snapped back to the pixel grid, as demonstrated in this jsfiddle: http://jsfiddle.net/8csA9/20/ (part of this is probably a momentary 'blur' due to filtering, but there's definitely some shape modification going on here, at least in FF and Chrome)
Normally I'd not even consider messing with the intricacies of font-rendering, but considering the glyphs are so large I feel that it doesn't really matter in this case, and was wondering if there is either a way to disable hinting, or some other way of making these transitions a bit smoother. Does anyone know if this can be done, and how?
PS: This question actually extends a bit beyond just transitions, just applying a static rotation also makes at least Firefox continue to hint the text, and the result ends up looking rather.. odd
PPS: There does seem to exist (or have existed) a '-webkit-font-smoothing' property, but the CSS3-fonts draft appears to have dropped the rule it was based on (font-smooth), and it seems it only ever worked on Chrome for the Mac
Use backface-visibility: hidden;
**Update: webkit moz mz and the standard
http://jsfiddle.net/jugularkill/58S2z/4/
More on backface visibility:
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
This worked like a charm for me. I added "backface-visibility:hidden" (plus major browser prefixes) to the elements with the transition property, and it fixed the jump/jitter I was experiencing during the transition. I tested in Firefox, IE (9/10) and Chrome.
One thing I noticed though: Make sure you add the property to the element's natural state, as opposed to the pseudo-class (e.g. hover, active...) of an element.
For me I found that I needed to add both backface-visibility: hidden and transform-style: preserve-3d to the element that contained jumpy content.
For example:
.element-with-jumpy-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
If you're using Bootstrap you can use this class:
.backface-visibility(hidden);
Adding transform: translate3d(0, 0, 0); or transform: translateZ(0); often helps to fix transition bugs, because it forces browser to use hardware-accelerated 3D transitions.
I've been developing a website for my FIRST robotics team. However, recently a horizontal scrollbar has appeared which seems to have no explanation. No elements protrude past the edge of the page, and it works fine in IE. I can fix it with body { overflow-x:hidden ) but I'd rather find the true culprit. Any help would be appreciated. The site is wordpress-based, and can be found here.
Here is the reason on line 22 vender-extension-style.css
try to remove this
#header-cut-out {
-moz-transform: skew(-45deg);
}
line 28 vender-extension-style.css below css on img tag
#header-cut-out img {
-moz-transform: skew(45deg);
}
your scroll will remove and you have to work on it to get the desired output.
I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering.
Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine.
Wish I had more information, but maybe someone else has run into a similar problem.
.swatch {
-webkit-box-shadow: #EFEFEF 2px 2px 0px;
-webkit-transform: scale(1);
-webkit-transition-duration: 0.2s;
border: 1px solid white;
position: relative;
z-index: 1;
.swatch:hover {
position:relative;
z-index:10;
transition-duration: 0.2s;
transform:scale(1.8);
-webkit-transition-duration: 0.2s;
-webkit-transform:scale(1.8);
}
It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project.
Any thoughts are appreciated.
I've had success adding
-webkit-backface-visibility: hidden;
to the offending element (.swatch in your case).
However, test it in older versions of Chrome and Safari to make sure it doesn't break anything else. In my experience, Safari 4 specifically isn't a big fan.
I had the same problem at this morning. But I found an answer on the web few moments ago.
To prevent the Blink issue, put the follow property on your .swatch class (not on :hover):
-webkit-transform-style: preserve-3d;
Try changing position:relative to position:absolute, and/or specify position attributes (top: x, left: y.
No idea if it will work, just throwing it out there.
when mouse over the images(img:hover) in chrome works fine. you can use like this
.swatch img:hover
http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/
I had the same problem try using opacity instead of z-index
img:hover{
opacity: 0;
}
On a different subject, I had the same effect (the awfull blink).
However, it wasn't on hover principles. It was on a dragable area, I wanted as smooth as possible on iPad. The area was originally moved with a css margin-left property.
Then, I used -webkit-transform':'translate3d(X, Y, Z)' for the smooth rendering, which is the case.
BUT, the use of translated3d made the famous blink, on the first drag (on iPad only).
Thanks to Fábio ZC, the -webkit-transform-style: preserve-3d; worked perfectly to get rid of the blink
For those who wants to know more about the -webkit-transform-style: preserve-3d and what is involved.
Back to the original problem, these are my thoughts:
You mention Safari & Chrome (so, webkit). Is the problem only on those browser? Which would lead to -webkit suspicious properties.
If so, -webkit-backface-visibility: hidden; or -webkit-transform-style: preserve-3d; are still good candidates to be tried:
Did you attach them on the .swatch class? (not hover state, otherwise, they will be considered too late, as the animation will be played directly)
You stated that the whole page is blinking? Strange as only the swatches should be impacted.
I deleted this line from the hovering class:
"display: none;" and amazingly, that worked. Try it and hope it solves your problem.
I've been trying to apply a transform rule to some elements which also have a #font-face font applied to them.
h1 {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
When this transform rule is applied, I get the rotation I'm after, but the text does not appear correctly — although it's rotated, it's as though each character is bound to an origin which sits on a pixel, and so the line of text looks jagged.
If I simply replace the font with a system font, the problem goes away, so would appear to be related to the use of #font-face. I've tested it in a variety of browsers on OS X and Windows, and they all show similar results.
Has anybody come across this problem before, or can anybody give any advice on why this might be occurring?
Check out the source for this experiment.
It uses #font-face with rotate as well as some other nifty CSS3 effects.
Add these styles to <h1> element:
-webkit-backface-vivbility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;