webkit-transform | 易学教程

Elements disappear when scrolling in Safari - -webkit-transform fix only works the first time

阅读更多关于 Elements disappear when scrolling in Safari - -webkit-transform fix only works the first time

问题 This only happens in iPhone-sized Safari. I am aware that the "usual fix" for this issue is to apply -webkit-transform: translate3d(0,0,0); (per Serge's answer here) and that does fix the issue, but only once. The issue occurs with a "drawer" menu that opens when the user clicks a menu button. The menu will show normally, but when it is touched/scrolled by a finger, the whole menu disappears from the page. Applying -webkit-transform: translate3d(0,0,0) fixes the issue, but only the first time

css @-moz-keyframes animation not working on firefox 18.0.1

阅读更多关于 css @-moz-keyframes animation not working on firefox 18.0.1

问题 css @-moz-keyframes animation on firefox 18.0.1 is not working, I have checked this animation on previous version( forgot version previous number) , it was working, Here is the animation <html> <head> <style type="text/css"> @-webkit-keyframes animation { 0% { -webkit-transform:translate(100px,100px) scale(1); } 50% { -webkit-transform:translate(00px,00px) scale(2); } 100% { -webkit-transform:translate(100px,100px) scale(1); } } @-moz-keyframes animation_m { 0% { -moz-transform:translate

webkit transform scale making items disappear

阅读更多关于 webkit transform scale making items disappear

问题 I am trying to scale a div in my HTML page. This div contains a lot of canvas elements and other div elements. Basically this div acts as the container for all other items in the page. With Chrome "23.0.1271.95 m" and IOS6.0 safari, the items present on the right and the bottom part of this div do not appear after scaling. If I resize the window (or change the orientation on iPad), the div scales correctly and the items begin to appear, but again disappear after a certain size. This used to

webkit transform scale making items disappear

阅读更多关于 webkit transform scale making items disappear

CSS3 how to calculate height and width after scale [duplicate]

阅读更多关于 CSS3 how to calculate height and width after scale [duplicate]

问题 This question already has answers here : Retrieve width/height of a css3 scaled element (4 answers) Closed 6 years ago . Is there any jQuery solution that to find exact display height of the -webkit-transform: scale(0.7851); the scale value may vary that is why looking for proper solution Tested these options unfortunately didn't find solution yet :( height() innerHeight() outerHeight() outerHeight(true) I think this issue only can fix one the basis of mathematics ;) 回答1: Use

Checking hardware acceleration availability? (Testing available)

阅读更多关于 Checking hardware acceleration availability? (Testing available)

问题 I've written CSS that uses -webkit-transform, -webkit-perspective and several similar. My design looks the bees knees on machines where hardware acceleration is available but is practically unusable when not. How can I check hardware acceleration availability and provide fallback CSS? Side note: Run chrome://gpu-internals/ to manually check for availability. 回答1: Sadly, the answer seems to be 'you can't (yet)'. The Modernizr project lists HW acceleration amongst its 'undetectables': https:/

How to calculate absolute position of transformed div

阅读更多关于 How to calculate absolute position of transformed div

问题 When you use transform on div, absolute positioning not working as you expected anymore, and seems like it needs to be calculated manually. For instance when you want your div to be at the bottom of container you do: div{ position:absolute; bottom:0%; } But if you transform this div like -webkit-transform:rotateX(angle); it won't be at the bottom of container. Is places somewhere in between of container depends of its size. I create jsfiddle to illustrate this, and also show what i'm trying

Using iScroll prevents the keyboard from showing on my device

阅读更多关于 Using iScroll prevents the keyboard from showing on my device

问题 I am using iScroll for providing iPhone style scrolling. But, when clicking on the textboxes, the keyboard does not show up. While trying to find the possible cause, I found that removing the iScroll script, makes it work normal, but in that case I miss the scrolling functionality. Is this a bug in iScroll. If yes, is there a tested work-around? Or is there any alternative for iScroll? Thanks in advance. 回答1: At least in iScroll 4, you can add this code to enable clicking of input fields. See

CSS Scale an element with 100% width

阅读更多关于 CSS Scale an element with 100% width

问题 I am interested in zooming out a div with 100% width. The problem I am having, is when I scale the element out it gets a fixed width and no longer extends 100% of the width. Example - http://jsfiddle.net/Fz7qh/2/ When I use the CSS zoom property (as opposed to transform: scale) it works as expected, but I hear the zoom property is not well supported. My question is can this be achieved with CSS transform scale? 回答1: To emulate what the zoom property does in this case, you can add -transform

CSS Scale an element with 100% width

阅读更多关于 CSS Scale an element with 100% width

I am interested in zooming out a div with 100% width. The problem I am having, is when I scale the element out it gets a fixed width and no longer extends 100% of the width. Example - http://jsfiddle.net/Fz7qh/2/ When I use the CSS zoom property (as opposed to transform: scale) it works as expected, but I hear the zoom property is not well supported. My question is can this be achieved with CSS transform scale? To emulate what the zoom property does in this case, you can add -transform-origin: 0 0; and set the width to oldWidth / newScale ( 100 / 0.7 ~= 142.857143 ): http://jsfiddle.net