Articles of css3

CSS转换或animation无法在phonegap中工作

我需要为 设置animation。 尝试使用@keyframes和过渡。 这是一个代码: 过渡 #menu{ … width:70%; -webkit-transition: width 5s; .. } 关键帧 #menu{ … width:70%; animation: menuEffect 3s; .. } @keyframes menuEffect { from {width:0%;} to {width:70%;} } 我正在使用cordova / phonegap 2.0.0并针对Android 4.0及更高版本。 我认为这不起作用。 转换和animation不支持phonegap吗? 请协助。

Android 2.3 WebView支持-webkit-column-break-before吗?

我正在尝试使用WebView在我的Android应用程序中使用CSS3多列列布局,但是想要确保在h1标签之前总是有一个中断。 此规则似乎适用于Android 4.0 WebView,但看起来在2.3.3中被忽略。 有人有这个工作吗?

Chrome for Android无法正确显示Google网络字体

我已经重新创建了我使用CSS font-family和Chrome for Android的问题。 Web浏览器不会正确inheritance字体,而是使用后备字体。 这似乎是已在Google上出票的错误( http://code.google.com/p/chromium/issues/detail?id=138257 )。 将到HTML应该可以解决问题,但这只能解决第一个元素的设置字体问题。 JS Bin链接将有助于解释我在说什么。 所以,如果有人使用Chrome for Android,请转到链接查看我在说什么! 谢谢。

Android 2.3浏览器无法渲染一些CSS3 2D变换

我在使用任何使用默认webkit引擎的浏览器(例如默认浏览器,Dolphin HD,Amazon Kindle Fire Silk浏览器等)中使用CSS3 2D Transforms在Android 2.3中工作时遇到了麻烦。 Android 2.3 webkit引擎确实支持2D变换,我已经能够让一些2D变换的网站正确渲染,而不是我的网站! 有没有人知道Android 2.3中可能导致与2D变换冲突的任何问题? 或者,有没有一种方法可以使用Android 2.3 webkit渲染引擎为浏览器定位css? 当我使用Modernizr时,在这种情况下它不起作用,因为Android 2.3浏览器对2D变换测试为正。 这是我的网站:http: //StevenGerner.com 。 在首页上,我正在旋转两个元素-90deg(网站标题和一个h2元素),并且都不会在Android 2.3浏览器上旋转。 我甚至尝试过其他的css变换,但似乎没有任何改变。 如果我将整个页面剥离到基本的,那么转换工作完美无缺,所以我的网站上可能还有其他冲突,我只是无法弄清楚是什么! 这是特定于变换的CSS: //Applied to the h2 element which says ‘howdy’ at the top of the page #about-front h2 { display: inline-block; float: left; -ms-filter: “progid:DXImageTransform.Microsoft.BasicImage(rotation=4)”\9; -webkit-transform: rotate(-90deg); -webkit-transform-origin: 170% 170%; -moz-transform: […]

background-size:封面在android本机浏览器中不起作用

我正在尝试使用background-size:cover将背景图像放到容器中。 这是我的小提琴: 小提琴 它适用于所有浏览器但不适用于Android原生浏览器..任何人都有任何解决方案吗? 谢谢

Android浏览器和背面可见性问题

我在Androids webkit浏览器中实现3d变换(特别是Y轴旋转)时遇到了麻烦。 我的实现与此示例类似: http -webkit-transform: rotateY( 180deg ); div通过-webkit-transform: rotateY( 180deg );翻转-webkit-transform: rotateY( 180deg ); 但似乎-webkit-backface-visibility: hidden; 没有任何效果,因为div的背面总是可见的。 以下是运行4.1的Android模拟器的屏幕截图: 这里发生了什么? 这个例子在iOS Safari中运行良好。 这是一个已知的Android错误,有没有办法解决这个问题?

Android Webview是否支持CSS3 WebKitanimation?

Android OS上的WebView控件是否支持硬件加速的css3animation? 我在Safari Mobile上工作的所有webkit css(例如:-webkit-transition bla bla)是否在android上运行相同?

为什么android浏览器视口比手机的实际屏幕尺寸小得多,即使使用width = device-width?

我想问一下为什么我的HTC Desire HD浏览器报告视口的宽度为369px,即使屏幕的实际像素大小为480×800 WVGA。 我在我的页面中使用这个CSS样式: 你能解释一下这个奇怪的行为,以及如何强制Android浏览器实际将视口的宽度设置为480px而不是奇怪的369px? 感谢您的任何帮助。

border-radius在现代原生Android浏览器中不起作用

我有一个使用border-radius的页面。 它在原生Android浏览器中不显示四舍五入; 它显示方角。 它显示在桌面Chrome,IE,FF等精细,但不在本机手机浏览器中。 有没有人知道这是浏览器本身的问题,我不使用的一些额外的CSS扩展等等? 这是我的CSS(在演示中): .bigButton2 { width: 320px; height: 200px; margin: auto; padding: 20px; background-color: #521c0b; color: #FFFFFF; border: 3px solid #e3b21e; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } 我已经建立了一个JSFiddle: http : //jsfiddle.net/VJvQA/ 我试过填充,没有填充,没有盒子大小,没有盒子大小,它只是显示为尖角。 任何帮助或见解将不胜感激。 我意识到有人发布了这个( 边界半径样式在android浏览器中不起作用 ),但是他没有提供任何代码,JSFiddle,并且它没有得到任何真实答案的一般问题的错误回答; 如果可以的话,我会对它进行投票,但我认为提出一个实际写得很好的问题会更好。 谢谢!

css3转换rotate3d,透视不适用于Android

我有一个使用3D转换的Web应用程序,它在Android 4.1的Android浏览器中运行良好。 但是,PhoneGap容器中的相同应用程序会导致挤压和扩展animation,而不是透视3D旋转。 有没有办法让它在PhoneGap中运行,还是使用不能进行3D转换的不同渲染引擎? 我用 -webkit-perspective: 300; 在父母和 -webkit-transform: rotate3d(0, 1, 0, -180deg); -webkit-transform-style: preserve-3d; 在旋转图像上。