I have a very tricky issue using fullpage.js, a library that brings you a full-page slider. I want the slider to contain a background image with a title (h1). Moreover, between the background and the title I want to place a transparant image as an overlay, one that doesn’t slide along (with an absolute position).
Even though I I am able to move the title above the overlay by setting the z-index to 2, full page.js adds -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px) to the slidercontainer as soon as you slide, hereby ignoring the z-values and moving he title behind the overlay.
I’ve tried transform-style: flat; (like they propose here: css z-index lost after webkit transform translate3d), but this doesn’t work for me.
Turns out I’m not the only one with this problem (https://stackoverflow.com/questions/27179052/fullpage-js-z-index-lost-after-css3-enabled).
Does anyone have any clue how to fix this?
Thanks!
just add transform: translate3d(0,0,1px); to the elements which are affected.
Related
As you can see at the top part of the picture, there is a css line given to the element itself -> transform: translate3d(681px, 407px, 0px);
I would like to add a property scale to the transform but it just overwrites the translate3d
I know I can put these 2 after eachother like this: transform: translate3d(681px, 407px, 0px) scale(2); But I can't use this as the number in translate3d are random and there is no way for me of knowing them.
Is there any way I can still use the scale property without ruining the translate3d ?
That's sadly not possible using the transform property.
But you can use the standalone scale property for this, once it is supported by all major browsers. Browser support is really poor at the moment.
https://caniuse.com/mdn-css_properties_scale
I have a div which is initially translated out of the screen using this CSS
transform: translateX(100%);
Now, I want this div to translate back into the view port by a specific number of pixels from the right side. I have been using transform: translateX(-450px), but it translates with respect to the origin of the viewport i.e (x,y) = (0,0). What I want instead is to bring the div 450px into the viewport from the right side of the screen.
In other words, I want my origin of translate to be (x,y)=(100%,0%)
Is there anything which can be done to achieve this?
You could add multiple translate the transform CSS side by side.
.box{
transform: translateX(100%) translateX(-450px);
}
I've encountered a small glitch in the CSS animation scale(). I've set up the CSS to scale an image 1.1 times when I hover the image. This happens correctly, but an annoying line goes over the image as well. This is due to the scale() transform, because if I leave this out, the lines do not show. Can this be because I make the image bigger than its actual size or ... ?
It's even showing in this fiddle I created: http://jsfiddle.net/gpafke6y/
transform: scale(1.1)
Image showing what I mean:
Use transition 0.5s that will be more smooth. See here or here for Details
URL: https://www.royalsmushicafe.dk/
I have issues with the left side menu text looking blurry on mouseover. It's as if it's blurry during the animation and turns crisp again only after the animation is over. In Safari it stays blurry.
I'm using Transform: scale(1.2) and -webkit-font-smoothing: subpixel-antialiased;, but have tried quite a lot of suggested solutions.
I've been browsing StackOverflow and Google without luck, with suggestions like using transform perspective(1px), scale3d, translate3d( 0, 0, 0), backface-visibility: hidden even filter: blur(0) and whatnot – nothing has resulted in the expected behaviour of a crisp text scaling on mouseover :(
Any help would be much appreciated
I've just had almost the exact same problem, and found all the same hack ideas for perspective(1px), backface-visibility: hidden, and so on, with no success. Chrome and Firefox are fine, but scaled-up text blurs horribly in Safari. For anyone else experiencing this, the band-aid solution is to scale down instead of up.
In my case, I have a label that moves and changes scale when the input has content:
label {
will-change: transform, color;
transform: translate3d(0,0,0);
transform-origin: top left;
height: 20px;
}
input:placeholder-shown:not(:focus) + label {
transform: translate3d(0,.6rem,0) scale3d(1.5,1.5,1);
}
Idea here is that the label has the same styles if the input is focused or has content, and is bigger if the input is empty and unfocused (hence the funky pseudoclass selector.)
The problem is that using transform like this triggers GPU compositing on the <label>. When this happens, the composited layer is rendered like a bitmap in the GPU, at the dimensions calculated during CSS layout (20px here). Then, the GPU layer is scaled up (in this case by 1.5x, so it's now 30px high, and blurry).
Chrome and Firefox seem to re-render the layer at final scale which un-blurs it. Safari does not, probably to save memory since the composited layer is dimensionally smaller (20px high instead of 30px).
To make it work better, I opted to scale down:
label {
will-change: transform, color;
/* reverse the scaling ratio */
transform: translate3d(0,0,0) scale3d(0.67, 0.67, 1);
transform-origin: top left;
height: 20px;
}
input:placeholder-shown:not(:focus) + label {
/* reset to scale of 1 */
transform: translate3d(0,.6rem,0) scale3d(1,1,1);
}
The scaled-down text is a tiny bit blurry, but much less noticeably. I might try different -webkit-font-smoothing values, although I don't hold out a lot of hope because of the way GPU rendering works. Scaling ratios that resolve to a clean, integer pixel font size will probably work better, too.
Would backface-visibility: hidden; help? I recall having similar problems and it did help.
Fiddle
Basically, instead of just the basic rotateY(180deg) method, I'm trying to combine it with a translateX transform so that the card looks like it's actually being picked up from the right side (left when flipping back) and then being laid back down on the "table" in its new orientation.
As you can see in the Fiddle, it has the right general motion, but for some reason the two faces are not in sync. I'm not sure what I'm doing wrong - I guess I'm just not spacial-geometrically incined XD
Any help sorting this animation out would be much appreciated!
I think that this is what you want:
updated fiddle
The trick is that the background needs another transform origin:
#tcb {
background:#030;
transform:translateX(-100%) rotateY(180deg);
-webkit-transform:translateX(-100%) rotateY(180deg);
z-index:0;
transform-origin:100% 50%;
-webkit-transform-origin:100% 50%;
}
The reason is that the angle of rotation is reversed, so that you need to flip it around the other border. (So, the origin at 100%). And now that you have changed, that, you need to readjust the offset (the translateX value)
I needed also to move the transform-origin for the foreground from the div (where it was set both for foreground and background) to the foreground div.