Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add missing vendor prefixes #5642

Closed
wants to merge 18 commits into from

2 participants

@nschonni

Running CSSLint I found a few missing vendor prefixed properties.
Mostly for transforms, animations, and border-radius values.

@jaspermdegroot
Collaborator

@nschonni

Thanks for the PR. Here is my feedback.

  • -moz-border-radius: We just removed this from the CSS because we support Firefox 4+ which supports the unprefixed property.
  • -moz-appearance: I think we added -webkit-appearance: none; to those two rules for hiding the native element to resolve an issue on an older WebKit browser. Hiding the element works fine on Firefox and Firefox for Android so there is no need to add this.
  • -o- prefixed transitions: The framework only enables transitions if a platform/browser supports 3D transforms. That is to be sure that all transitions will work (not just the 2D) and that they will animate smooth. Opera doesn't support 3D transforms so we didn't add this. See #4521.
  • -ms- prefixed transitions: IE supports transitions from IE10 and doesn't require the prefix (http://msdn.microsoft.com/en-us/library/ie/hh673535(v=vs.85).aspx). We added the unprefixed properties in 1.3 to support transitions on IE10. -ms- is superfluous.

I am closing this PR because there is no need to apply these changes. Thanks again for the effort!

@nschonni nschonni commented on the diff
css/structure/jquery.mobile.panel.css
((6 lines not shown))
-webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ -o-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);

Non-vendor prefix property missing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@nschonni

That's fine. I'll do a separate PR for just the issue I flagged inline with the missing standard property

@nschonni nschonni deleted the unknown repository branch
@jaspermdegroot
Collaborator

@nschonni

transform: translate3d(0,0,0); isn't needed there. This rule is there to force mobile WebKit browsers to use hardware acceleration. This trick isn't needed for Firefox or IE so we only use the -webkit prefixed property.

@nschonni

I see, maybe a little clearer comment would help:
/* hardware acceleration for smoother transitions */
to
/* Force hardware acceleration on WeKit and Mozilla browsers for smoother transitions */

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 14, 2013
  1. @nschonni

    Button: Add missing vendor prefix values

    nschonni authored
    - moz appearance for hidding
    - moz border-radius for button text
  2. @nschonni
  3. @nschonni
  4. @nschonni
  5. @nschonni
  6. @nschonni
  7. @nschonni
  8. @nschonni
  9. @nschonni
  10. @nschonni

    Transition Flip: Add ms and o vendor prefixes

    nschonni authored
    Minor reordering of properties
  11. @nschonni

    Transition Flow: Add missing ms and o vendor prefixes

    nschonni authored
    Ordered by property
  12. @nschonni

    Transition Pop: Add missing ms and o vendor prefixes

    nschonni authored
    Ordered properties
  13. @nschonni

    Transition Slide: Add o and ms vendor prefixes

    nschonni authored
    Ordered properties
  14. @nschonni
  15. @nschonni
  16. @nschonni
  17. @nschonni
  18. @nschonni
This page is out of date. Refresh to see the latest.
View
3  css/structure/jquery.mobile.button.css
@@ -54,6 +54,7 @@ div.ui-btn-text { width: auto; }
.ui-btn-inner,
.ui-btn-text {
-webkit-border-radius: inherit;
+ -moz-border-radius: inherit;
border-radius: inherit;
}
@@ -84,7 +85,7 @@ div.ui-btn-text { width: auto; }
.ui-mini .ui-btn-icon-bottom .ui-icon { bottom: 5px; }
/*hiding native button,inputs */
-.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=0); opacity: .1; font-size: 1px; border: none; text-indent: -9999px; }
+.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=0); opacity: .1; font-size: 1px; border: none; text-indent: -9999px; }
/* Fixes IE/WP filter alpha opacity bugs */
.ui-disabled .ui-btn-hidden { display: none; }
.ui-disabled { z-index: 1; }
View
2  css/structure/jquery.mobile.collapsible.css
@@ -31,11 +31,13 @@
.ui-collapsible-set > .ui-collapsible.ui-corner-all {
-webkit-border-radius: 0;
+ -moz-border-radius: 0;
border-radius: 0;
}
.ui-collapsible-heading,
.ui-collapsible-heading > .ui-btn {
-webkit-border-radius: inherit;
+ -moz-border-radius: inherit;
border-radius: inherit;
}
.ui-collapsible-set .ui-collapsible.ui-first-child {
View
2  css/structure/jquery.mobile.controlgroup.css
@@ -37,6 +37,7 @@
.ui-controlgroup .ui-btn-corner-all {
-webkit-border-radius: 0;
+ -moz-border-radius: 0;
border-radius: 0;
}
.ui-controlgroup .ui-controlgroup-controls,
@@ -45,6 +46,7 @@
.ui-controlgroup .ui-select,
.ui-controlgroup li {
-webkit-border-radius: inherit;
+ -moz-border-radius: inherit;
border-radius: inherit;
}
.ui-controlgroup-vertical .ui-btn.ui-first-child {
View
2  css/structure/jquery.mobile.core.css
@@ -31,7 +31,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-loader-verbose { width: 200px; filter: Alpha(Opacity=88); opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
-.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; border-radius: 36px; }
+.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; filter: Alpha(Opacity=75); opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
View
2  css/structure/jquery.mobile.forms.select.css
@@ -3,7 +3,7 @@
.ui-select .ui-btn { opacity: 1; }
.ui-field-contain .ui-select .ui-btn { margin: 0; }
/* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
-.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: none; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; filter: Alpha(Opacity=0); opacity: 0; z-index: 2; }
+.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; filter: Alpha(Opacity=0); opacity: 0; z-index: 2; }
.ui-select .ui-disabled { opacity: .3; }
/* Display none because of issues with IE/WP's filter alpha opacity */
View
2  css/structure/jquery.mobile.forms.slider.css
@@ -136,6 +136,8 @@ div.ui-slider-switch.ui-mini {
.ui-slider-handle-snapping {
-webkit-transition: left 70ms linear;
-moz-transition: left 70ms linear;
+ -o-transition: left 70ms linear;
+ transition: left 70ms linear;
}
.ui-slider-switch.ui-mini .ui-slider-handle .ui-btn-inner {
height: 30px;
View
2  css/structure/jquery.mobile.forms.textinput.css
@@ -12,7 +12,7 @@ input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini,
.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search, .ui-field-contain div.ui-input-text { margin: 0; }
textarea.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
-input.ui-input-text { -webkit-appearance: none; }
+input.ui-input-text { -webkit-appearance: none; -moz-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
textarea.ui-mini { height: 45px; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
View
19 css/structure/jquery.mobile.panel.css
@@ -61,6 +61,7 @@
.ui-panel-animate {
-webkit-transition: -webkit-transform 350ms ease;
-moz-transition: -moz-transform 350ms ease;
+ -o-transition: -moz-transform 350ms ease;
transition: transform 350ms ease;
}
@@ -70,7 +71,13 @@
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
-webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ -o-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);

Non-vendor prefix property missing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
}
/* positioning: panel */
@@ -84,6 +91,8 @@
left: 0;
-webkit-transform: translate3d(-17em,0,0);
-moz-transform: translate3d(-17em,0,0);
+ -ms-transform: translate3d(-17em,0,0);
+ -o-transform: translate3d(-17em,0,0);
transform: translate3d(-17em,0,0);
}
/* panel left open */
@@ -96,6 +105,8 @@
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ -o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* panel right */
@@ -108,6 +119,8 @@
right: 0;
-webkit-transform: translate3d(17em,0,0);
-moz-transform: translate3d(17em,0,0);
+ -ms-transform: translate3d(17em,0,0);
+ -o-transform: translate3d(17em,0,0);
transform: translate3d(17em,0,0);
}
/* panel right open */
@@ -120,6 +133,8 @@
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ -o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
@@ -140,6 +155,8 @@
right: 0;
-webkit-transform: translate3d(17em,0,0);
-moz-transform: translate3d(17em,0,0);
+ -ms-transform: translate3d(17em,0,0);
+ -o-transform: translate3d(17em,0,0);
transform: translate3d(17em,0,0);
}
/* panel right open */
@@ -158,6 +175,8 @@
right: 0;
-webkit-transform: translate3d(-17em,0,0);
-moz-transform: translate3d(-17em,0,0);
+ -ms-transform: translate3d(-17em,0,0);
+ -o-transform: translate3d(-17em,0,0);
transform: translate3d(-17em,0,0);
}
/* negate "panel left/right open" for overlay */
View
1  css/structure/jquery.mobile.popup.css
@@ -95,6 +95,7 @@
.ui-popup:not(.ui-content) > .ui-btn-left:first-child + img:last-child,
.ui-popup:not(.ui-content) > .ui-btn-right:first-child + img:last-child {
-webkit-border-radius: inherit;
+ -moz-border-radius: inherit;
border-radius: inherit;
}
.ui-popup iframe {
View
32 css/structure/jquery.mobile.transition.flip.css
@@ -13,46 +13,58 @@
}
.flip {
-webkit-backface-visibility: hidden;
- -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-backface-visibility: hidden;
- -moz-transform: translateX(0);
backface-visibility: hidden;
+ -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -moz-transform: translateX(0);
+ -ms-transform: translateX(0);
+ -o-transform: translateX(0);
transform: translateX(0);
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
- -webkit-animation-name: flipouttoleft;
- -webkit-animation-duration: 175ms;
-moz-transform: rotateY(-90deg) scale(.9);
- -moz-animation-name: flipouttoleft;
- -moz-animation-duration: 175ms;
+ -ms-transform: rotateY(-90deg) scale(.9);
+ -o-transform: rotateY(-90deg) scale(.9);
transform: rotateY(-90deg) scale(.9);
+ -webkit-animation-name: flipouttoleft;
+ -moz-animation-name: flipouttoleft;
+ -o-animation-name: flipouttoleft;
animation-name: flipouttoleft;
+ -webkit-animation-duration: 175ms;
+ -moz-animation-duration: 175ms;
+ -o-animation-duration: 175ms;
animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
- -webkit-animation-duration: 225ms;
-moz-animation-name: flipintoright;
- -moz-animation-duration: 225ms;
+ -o-animation-name: flipintoright;
animation-name: flipintoright;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-duration: 225ms;
+ -o-animation-duration: 225ms;
animation-duration: 225ms;
}
.flip.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
- -webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
- -moz-animation-name: flipouttoright;
+ -ms-transform: rotateY(90deg) scale(.9);
+ -o-transform: rotateY(90deg) scale(.9);
transform: rotateY(90deg) scale(.9);
+ -webkit-animation-name: flipouttoright;
+ -moz-animation-name: flipouttoright;
+ -o-animation-name: flipouttoright;
animation-name: flipouttoright;
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
+ -o-animation-name: flipintoleft;
animation-name: flipintoleft;
}
View
54 css/structure/jquery.mobile.transition.flow.css
@@ -1,62 +1,80 @@
/* flow transition */
.flow {
-webkit-transform-origin: 50% 30%;
- -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
-moz-transform-origin: 50% 30%;
- -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
+ -ms-transform-origin: 50% 30%;
+ -o-transform-origin: 50% 30%;
transform-origin: 50% 30%;
+ -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
+ -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.ui-dialog.flow {
-webkit-transform-origin: none;
- -webkit-box-shadow: none;
-moz-transform-origin: none;
- -moz-box-shadow: none;
+ -ms-transform-origin: none;
+ -o-transform-origin: none;
transform-origin: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
box-shadow: none;
}
.flow.out {
-webkit-transform: translateX(-100%) scale(.7);
- -webkit-animation-name: flowouttoleft;
- -webkit-animation-timing-function: ease;
- -webkit-animation-duration: 350ms;
-moz-transform: translateX(-100%) scale(.7);
- -moz-animation-name: flowouttoleft;
- -moz-animation-timing-function: ease;
- -moz-animation-duration: 350ms;
+ -ms-transform: translateX(-100%) scale(.7);
+ -o-transform: translateX(-100%) scale(.7);
transform: translateX(-100%) scale(.7);
+ -webkit-animation-name: flowouttoleft;
+ -moz-animation-name: flowouttoleft;
+ -o-animation-name: flowouttoleft;
animation-name: flowouttoleft;
+ -webkit-animation-timing-function: ease;
+ -moz-animation-timing-function: ease;
+ -o-animation-timing-function: ease;
animation-timing-function: ease;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+ -o-animation-duration: 350ms;
animation-duration: 350ms;
}
.flow.in {
-webkit-transform: translateX(0) scale(1);
- -webkit-animation-name: flowinfromright;
- -webkit-animation-timing-function: ease;
- -webkit-animation-duration: 350ms;
-moz-transform: translateX(0) scale(1);
- -moz-animation-name: flowinfromright;
- -moz-animation-timing-function: ease;
- -moz-animation-duration: 350ms;
+ -ms-transform: translateX(0) scale(1);
+ -o-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
+ -webkit-animation-name: flowinfromright;
+ -moz-animation-name: flowinfromright;
+ -o-animation-name: flowinfromright;
animation-name: flowinfromright;
+ -webkit-animation-timing-function: ease;
+ -moz-animation-timing-function: ease;
+ -o-animation-timing-function: ease;
animation-timing-function: ease;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+ -o-animation-duration: 350ms;
animation-duration: 350ms;
}
.flow.out.reverse {
-webkit-transform: translateX(100%);
- -webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
- -moz-animation-name: flowouttoright;
+ -ms-transform: translateX(100%);
+ -o-transform: translateX(100%);
transform: translateX(100%);
+ -webkit-animation-name: flowouttoright;
+ -moz-animation-name: flowouttoright;
+ -o-animation-name: flowouttoright;
animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
+ -o-animation-name: flowinfromleft;
animation-name: flowinfromleft;
}
View
28 css/structure/jquery.mobile.transition.pop.css
@@ -1,28 +1,36 @@
.pop {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ -o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.pop.in {
-webkit-transform: scale(1);
- -webkit-animation-name: popin;
- -webkit-animation-duration: 350ms;
-moz-transform: scale(1);
- -moz-animation-name: popin;
- -moz-animation-duration: 350ms;
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
transform: scale(1);
+ -webkit-animation-name: popin;
+ -moz-animation-name: popin;
+ -o-animation-name: popin;
animation-name: popin;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+ -o-animation-duration: 350ms;
animation-duration: 350ms;
opacity: 1;
}
.pop.out {
-webkit-animation-name: fadeout;
- -webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
- -moz-animation-duration: 100ms;
+ -o-animation-name: fadeout;
animation-name: fadeout;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
+ -o-animation-duration: 100ms;
animation-duration: 100ms;
opacity: 0;
}
@@ -30,15 +38,19 @@
.pop.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
+ -o-animation-name: fadein;
animation-name: fadein;
}
.pop.out.reverse {
-webkit-transform: scale(.8);
- -webkit-animation-name: popout;
-moz-transform: scale(.8);
- -moz-animation-name: popout;
+ -ms-transform: scale(.8);
+ -o-transform: scale(.8);
transform: scale(.8);
+ -webkit-animation-name: popout;
+ -moz-animation-name: popout;
+ -o-animation-name: popout;
animation-name: popout;
}
View
34 css/structure/jquery.mobile.transition.slide.css
@@ -3,44 +3,58 @@
.slide.out, .slide.in {
-webkit-animation-timing-function: ease-out;
- -webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
- -moz-animation-duration: 350ms;
+ -o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+ -o-animation-duration: 350ms;
animation-duration: 350ms;
}
.slide.out {
-webkit-transform: translateX(-100%);
- -webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
- -moz-animation-name: slideouttoleft;
+ -ms-transform: translateX(-100%);
+ -o-transform: translateX(-100%);
transform: translateX(-100%);
+ -webkit-animation-name: slideouttoleft;
+ -moz-animation-name: slideouttoleft;
+ -o-animation-name: slideouttoleft;
animation-name: slideouttoleft;
}
.slide.in {
-webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromright;
-moz-transform: translateX(0);
- -moz-animation-name: slideinfromright;
+ -ms-transform: translateX(0);
+ -o-transform: translateX(0);
transform: translateX(0);
+ -webkit-animation-name: slideinfromright;
+ -moz-animation-name: slideinfromright;
+ -o-animation-name: slideinfromright;
animation-name: slideinfromright;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
- -webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
- -moz-animation-name: slideouttoright;
+ -ms-transform: translateX(100%);
+ -o-transform: translateX(100%);
transform: translateX(100%);
+ -webkit-animation-name: slideouttoright;
+ -moz-animation-name: slideouttoright;
+ -o-animation-name: slideouttoright;
animation-name: slideouttoright;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromleft;
-moz-transform: translateX(0);
- -moz-animation-name: slideinfromleft;
+ -ms-transform: translateX(0);
+ -o-transform: translateX(0);
transform: translateX(0);
+ -webkit-animation-name: slideinfromleft;
+ -moz-animation-name: slideinfromleft;
+ -o-animation-name: slideinfromleft;
animation-name: slideinfromleft;
}
View
36 css/structure/jquery.mobile.transition.slidedown.css
@@ -1,43 +1,55 @@
/* slide down */
.slidedown.out {
-webkit-animation-name: fadeout;
- -webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
- -moz-animation-duration: 100ms;
+ -o-animation-name: fadeout;
animation-name: fadeout;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
+ -o-animation-duration: 100ms;
animation-duration: 100ms;
}
.slidedown.in {
-webkit-transform: translateY(0);
- -webkit-animation-name: slideinfromtop;
- -webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
- -moz-animation-name: slideinfromtop;
- -moz-animation-duration: 250ms;
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
transform: translateY(0);
+ -webkit-animation-name: slideinfromtop;
+ -moz-animation-name: slideinfromtop;
+ -o-animation-name: slideinfromtop;
animation-name: slideinfromtop;
+ -webkit-animation-duration: 250ms;
+ -moz-animation-duration: 250ms;
+ -o-animation-duration: 250ms;
animation-duration: 250ms;
}
.slidedown.in.reverse {
-webkit-animation-name: fadein;
- -webkit-animation-duration: 150ms;
-moz-animation-name: fadein;
- -moz-animation-duration: 150ms;
+ -o-animation-name: fadein;
animation-name: fadein;
+ -webkit-animation-duration: 150ms;
+ -moz-animation-duration: 150ms;
+ -o-animation-duration: 150ms;
animation-duration: 150ms;
}
.slidedown.out.reverse {
-webkit-transform: translateY(-100%);
- -webkit-animation-name: slideouttotop;
- -webkit-animation-duration: 200ms;
-moz-transform: translateY(-100%);
- -moz-animation-name: slideouttotop;
- -moz-animation-duration: 200ms;
+ -ms-transform: translateY(-100%);
+ -o-transform: translateY(-100%);
transform: translateY(-100%);
+ -webkit-animation-name: slideouttotop;
+ -moz-animation-name: slideouttotop;
+ -o-animation-name: slideouttotop;
animation-name: slideouttotop;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+ -o-animation-duration: 200ms;
animation-duration: 200ms;
}
View
48 css/structure/jquery.mobile.transition.slidefade.css
@@ -3,48 +3,64 @@
.slidefade.out {
-webkit-transform: translateX(-100%);
- -webkit-animation-name: slideouttoleft;
- -webkit-animation-duration: 225ms;
-moz-transform: translateX(-100%);
- -moz-animation-name: slideouttoleft;
- -moz-animation-duration: 225ms;
+ -ms-transform: translateX(-100%);
+ -o-transform: translateX(-100%);
transform: translateX(-100%);
+ -webkit-animation-name: slideouttoleft;
+ -moz-animation-name: slideouttoleft;
+ -o-animation-name: slideouttoleft;
animation-name: slideouttoleft;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-duration: 225ms;
+ -o-animation-duration: 225ms;
animation-duration: 225ms;
}
.slidefade.in {
-webkit-transform: translateX(0);
- -webkit-animation-name: fadein;
- -webkit-animation-duration: 200ms;
-moz-transform: translateX(0);
- -moz-animation-name: fadein;
- -moz-animation-duration: 200ms;
+ -ms-transform: translateX(0);
+ -o-transform: translateX(0);
transform: translateX(0);
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
+ -o-animation-name: fadein;
animation-name: fadein;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+ -o-animation-duration: 200ms;
animation-duration: 200ms;
}
.slidefade.out.reverse {
-webkit-transform: translateX(100%);
- -webkit-animation-name: slideouttoright;
- -webkit-animation-duration: 200ms;
-moz-transform: translateX(100%);
- -moz-animation-name: slideouttoright;
- -moz-animation-duration: 200ms;
+ -ms-transform: translateX(100%);
+ -o-transform: translateX(100%);
transform: translateX(100%);
+ -webkit-animation-name: slideouttoright;
+ -moz-animation-name: slideouttoright;
+ -o-animation-name: slideouttoright;
animation-name: slideouttoright;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+ -o-animation-duration: 200ms;
animation-duration: 200ms;
}
.slidefade.in.reverse {
-webkit-transform: translateX(0);
- -webkit-animation-name: fadein;
- -webkit-animation-duration: 200ms;
-moz-transform: translateX(0);
- -moz-animation-name: fadein;
- -moz-animation-duration: 200ms;
+ -ms-transform: translateX(0);
+ -o-transform: translateX(0);
transform: translateX(0);
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
+ -o-animation-name: fadein;
animation-name: fadein;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+ -o-animation-duration: 200ms;
animation-duration: 200ms;
}
View
36 css/structure/jquery.mobile.transition.slideup.css
@@ -1,43 +1,55 @@
/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
- -webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
- -moz-animation-duration: 100ms;
+ -o-animation-name: fadeout;
animation-name: fadeout;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
+ -o-animation-duration: 100ms;
animation-duration: 100ms;
}
.slideup.in {
-webkit-transform: translateY(0);
- -webkit-animation-name: slideinfrombottom;
- -webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
- -moz-animation-name: slideinfrombottom;
- -moz-animation-duration: 250ms;
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
transform: translateY(0);
+ -webkit-animation-name: slideinfrombottom;
+ -moz-animation-name: slideinfrombottom;
+ -o-animation-name: slideinfrombottom;
animation-name: slideinfrombottom;
+ -webkit-animation-duration: 250ms;
+ -moz-animation-duration: 250ms;
+ -o-animation-duration: 250ms;
animation-duration: 250ms;
}
.slideup.in.reverse {
-webkit-animation-name: fadein;
- -webkit-animation-duration: 150ms;
-moz-animation-name: fadein;
- -moz-animation-duration: 150ms;
+ -o-animation-name: fadein;
animation-name: fadein;
+ -webkit-animation-duration: 150ms;
+ -moz-animation-duration: 150ms;
+ -o-animation-duration: 150ms;
animation-duration: 150ms;
}
.slideup.out.reverse {
-webkit-transform: translateY(100%);
- -webkit-animation-name: slideouttobottom;
- -webkit-animation-duration: 200ms;
-moz-transform: translateY(100%);
- -moz-animation-name: slideouttobottom;
- -moz-animation-duration: 200ms;
+ -ms-transform: translateY(100%);
+ -o-transform: translateY(100%);
transform: translateY(100%);
+ -webkit-animation-name: slideouttobottom;
+ -moz-animation-name: slideouttobottom;
+ -o-animation-name: slideouttobottom;
animation-name: slideouttobottom;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+ -o-animation-duration: 200ms;
animation-duration: 200ms;
}
View
42 css/structure/jquery.mobile.transition.turn.css
@@ -8,58 +8,68 @@
.viewport-turn {
-webkit-perspective: 200px;
-moz-perspective: 200px;
- -ms-perspective: 200px;
perspective: 200px;
position: absolute;
}
.turn {
-webkit-backface-visibility: hidden;
- -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
- -webkit-transform-origin: 0;
-
-moz-backface-visibility: hidden;
- -moz-transform: translateX(0);
- -moz-transform-origin: 0;
-
backface-visibility :hidden;
+ -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -moz-transform: translateX(0);
+ -ms-transform: translateX(0);
+ -o-transform: translateX(0);
transform: translateX(0);
+ -webkit-transform-origin: 0;
+ -moz-transform-origin: 0;
+ -ms-transform-origin: 0;
+ -o-transform-origin: 0;
transform-origin: 0;
}
.turn.out {
-webkit-transform: rotateY(-90deg) scale(.9);
- -webkit-animation-name: flipouttoleft;
- -webkit-animation-duration: 125ms;
-moz-transform: rotateY(-90deg) scale(.9);
- -moz-animation-name: flipouttoleft;
- -moz-animation-duration: 125ms;
+ -ms-transform: rotateY(-90deg) scale(.9);
+ -o-transform: rotateY(-90deg) scale(.9);
transform: rotateY(-90deg) scale(.9);
+ -webkit-animation-name: flipouttoleft;
+ -moz-animation-name: flipouttoleft;
+ -o-animation-name: flipouttoleft;
animation-name: flipouttoleft;
+ -webkit-animation-duration: 125ms;
+ -moz-animation-duration: 125ms;
+ -o-animation-duration: 125ms;
animation-duration: 125ms;
}
.turn.in {
-webkit-animation-name: flipintoright;
- -webkit-animation-duration: 250ms;
-moz-animation-name: flipintoright;
- -moz-animation-duration: 250ms;
+ -o-animation-name: flipintoright;
animation-name: flipintoright;
+ -webkit-animation-duration: 250ms;
+ -moz-animation-duration: 250ms;
+ -o-animation-duration: 250ms;
animation-duration: 250ms;
-
}
.turn.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
- -webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
- -moz-animation-name: flipouttoright;
+ -ms-transform: rotateY(90deg) scale(.9);
+ -o-transform: rotateY(90deg) scale(.9);
transform: rotateY(90deg) scale(.9);
+ -webkit-animation-name: flipouttoright;
+ -moz-animation-name: flipouttoright;
+ -o-animation-name: flipouttoright;
animation-name: flipouttoright;
}
.turn.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
+ -o-animation-name: flipintoleft;
animation-name: flipintoleft;
}
View
4 css/themes/default/jquery.mobile.theme.css
@@ -800,6 +800,7 @@ a.ui-link-inherit {
.ui-corner-all {
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
+ -moz-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
}
@@ -834,6 +835,7 @@ a.ui-link-inherit {
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
+ -moz-border-radius: 9px;
border-radius: 9px;
}
@@ -1046,6 +1048,7 @@ a.ui-link-inherit {
.ui-checkbox .ui-icon,
.ui-selectmenu-list .ui-icon {
-webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
border-radius: 3px;
}
.ui-icon-checkbox-off,
@@ -1067,6 +1070,7 @@ a.ui-link-inherit {
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-corner-all {
-webkit-border-radius: 1em /*{global-radii-buttons}*/;
+ -moz-border-radius: 1em /*{global-radii-buttons}*/;
border-radius: 1em /*{global-radii-buttons}*/;
}
Something went wrong with that request. Please try again.