Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

don't do arrows on android/browsers that don't support mask images

  • Loading branch information...
commit aefb880bdd2421296d593890b01dc5f4cc8f25db 1 parent 800e7e1
@dbecher dbecher authored
Showing with 17 additions and 10 deletions.
  1. +5 −10 css/styles.css
  2. +12 −0 js/app.js
View
15 css/styles.css
@@ -464,7 +464,7 @@ label {
border-radius: 6px;
background: rgba(255, 255, 255, 0.4);
}
-.chat-message:before {
+body.css-maskimages .chat-message:before {
background-color: #ddd;
content: "";
display: block;
@@ -473,18 +473,13 @@ label {
position: absolute;
left: -7px;
bottom: 10px;
- -webkit-mask: -webkit-linear-gradient(left bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, transparent 50%, transparent 100%);
-/*
- -webkit-mask-image: linear-gradient(to right top, #000 0%, #000 50%, transparent 50%, transparent 100%);
- -moz-mask-image: linear-gradient(to top right, #000 0%, #000 50%, transparent 50%, transparent 100%);
- mask-image: linear-gradient(to right top, #000 0%, #000 50%, transparent 50%, transparent 100%);
- *//*
-
-webkit-transform: rotate( 45deg );
-moz-transform: rotate( 45deg );
-ie-transform: rotate( 45deg );
transform: rotate( 45deg );
- */
+ -webkit-mask-image: -webkit-linear-gradient(left bottom, #000 0%, #000 50%, transparent 50%, transparent 100%);
+ -moz-mask-image: linear-gradient(to top right, #000 0%, #000 50%, transparent 50%, transparent 100%);
+ mask-image: linear-gradient(to top right, #000 0%, #000 50%, transparent 50%, transparent 100%);
border: 1px solid #95979d;
}
/* messages from the current user are blue and to the right */
@@ -496,7 +491,7 @@ label {
float: right;
text-align: right;
}
-.chat-message-mine:before {
+body.css-maskimages .chat-message-mine:before {
background-color: #a8c8f8;
left: auto;
right: -7px;
View
12 js/app.js
@@ -207,4 +207,16 @@
return dateString;
}
+ // detect if css mask images are supported
+ var mask_images = ('WebkitMask' in document.body.style
+ || 'MozMask' in document.body.style
+ || 'OMask' in document.body.style
+ || 'mask' in document.body.style);
+ // normally you shouldn't UA sniff but there is a bug in Android that prevents
+ // them from working with CSS transforms
+ if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {
+ mask_images = false;
+ }
+ if(mask_images) $(document.body).addClass('css-maskimages');
+
})(this);
Please sign in to comment.
Something went wrong with that request. Please try again.