I applied the following CSS transform to an HTML input box.
-webkit-transform: scale(.5);
When I type text into the input box until it has filled the visible area, the caret continues past the edge of the input and is hidden. Normally the caret and the text would scroll as you type.
The text does eventually start scrolling once the caret has gone the width of the pre-scaled input. The browser seems to be ignoring the scaling when calculating when to scroll the text.
This is only an issue with WebKit browsers (tested with Chrome and iPad). The -moz-transform equivalent works fine in FireFox. The zoom property works fine in webkit, but it isn't nearly smooth enough when scaling on the iPad, so I can't really use it for my project.
You can see an example here: http://jsfiddle.net/4Kv6w/
The first input box is with the -webkit-transform scaling. The second box is with zoom set. The third is normal.
Any help would be greatly appreciated.
EDIT - You can also get the problem without scaling, by using -webkit-transform to move the input box to the left. Here's an example: http://jsfiddle.net/4Kv6w/15/
It seems there is a bug in WebKit when using a CSS transform to move an input box to the left. When you scale down an input box, it essentially moves the right edge to the left, which is how I was experiencing the problem.
The workaround for me was to position the input box way to the left
left: -2000px;
position: absolute;
and then move it back with the CSS transform.
-webkit-transform: matrix(.5, 0, 0, .5, 2000, 0);
You can see an example here: http://jsfiddle.net/4Kv6w/17/
Hey I'm assuming you're trying to animate the change. You will probably have better results using CSS transitions instead of a transform if that's the case. I've created a fiddle for you to see and try it out for yourself.
jsfiddle
Basically, I have a js event listener listening for when the textbox gets focus. Then I change the width in the js and the transition takes care of the animation. Hopefully this takes care of your issue.
Related
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
I am using a slider plugin (http://roundsliderui.com/) and added additional elements to have a custom fill image. In Chrome, the transitions that happen when the slider is clicked are not synchronized even though the settings are the same. It only seems to happen in Chrome, and is worse on mobile. I am targeting Android with the Crosswalk webview, so it will affect all users, especially slower phones.
The plugin has one element that rotates the handle, and I add one child to clip the fill image (.rs-range-clip-custom, no transform) with a child that rotates back to vertical to hold the fill image as a background (.rs-range-custom). It is very noticeable for the actual images, since the fill will either leave a gap at the end or extend past the end of the track depending on the direction it is moving.
.rs-animation .rs-transition {/* plugin css */
transition: all .5s linear 0s;
}
.rs-animation .rs-range-custom {/* my css */
transition: transform 0.5s linear;
}
You can view a simplified version of the slider at http://codepen.io/MalikDrako/pen/XjbaWR
How can I ensure the two animations are synchronized?
Here i have customized the roundSlider in sample level to achieve your requirement.
In the below demo i have added an additional SVG element as range to apply the image for that. Please check the below demo, which demonstrate your requirement:
http://jsbin.com/debiyu/edit?html,output
For better understanding I have applied some other png images in the below demo, check that:
http://jsbin.com/henola/1/edit?html,output
From here you can customize further based on your requirement. I hope this helps you.. Please let me know your comments.
I've been trying to understand and adapt the beautiful "gooey menu" posted here...
http://codepen.io/lbebber/pen/pvwZJp
My latest attempt to make a vertical/rectangular menu being here...
http://codepen.io/d3wannabe/pen/EVwEBE
But I have an issues that I'm really struggling to fix - when you use the dropdown menu in the second link (my one), after the initial animation on expanding, the whole menu jumps slightly to the left (whereas on collapse it jumps back to the right). If you look at the css (scss) I'm not applying any x-position transform/translates so I can't figure out what could be causing it.
The only piece of code I'm a little suspicious of because I don't fully understand it is...
.menu-open:checked~.menu-item{
transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
But still it sounds purely related to the time intervals that any transitions apply to and not a shift in the x-coordinate.
Thanks for any thoughts at all on what might be causing this unwanted jump!
In your Codepen, when the sub items are displayed, it causes the body page height to change and it overflows.
Thus a vertical scrollbar is then shown and the page width changes.
Just add a scrollbar by default
body {
overflow-y: scroll;
}
Codepen Demo
If you change the layout view in your original Codepen to the vertical option you can see that no scrollbar appears (at least on my monitor).
I've got an element which i'm trying to animate in. I want to do the animation in two steps, first scale and rotate a square in, and then widen the square. I start off by transform: scale(.1) rotateX(360deg); and animate to transform: none, which works well. But as soon as i (in any step) declare a height/width in the keyframes, the rotation stops working. It will still scale as it should, and the height/width properties are applied, but the rotation is skipped entirely.
Here is a Codepen to demonstrate the issue:
http://codepen.io/anon/pen/abDCK
As you see, there's no rotation going on in there, it just simply scales in. Now, scroll down in the CSS and comment out the height/width properties, and you'll see that the rotation now suddenly works.
I've tried different combinations of having/not having height/width declared in the normal selector (not in the keyframe), i've also tried putting the height/width declarations in different steps in the keyframes. No success.
I get the same result in both Firefox in Chrome. Is this the intended behaviour? If so, why? Are there any workarounds?
Something to do with the transforms in the keyframes not being balanced?. You need to add translateX(0deg) to either the 40% keyframe, of 100% keyframe, depending on where you want it.
http://codepen.io/anon/pen/lJKkD
I'd sure love it if somebody could explain the reason - but this is the "solution"
I have a <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.