Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
don't do arrows on android/browsers that don't support mask images
  • Loading branch information
David Becher committed Mar 9, 2013
1 parent 800e7e1 commit aefb880
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 10 deletions.
15 changes: 5 additions & 10 deletions css/styles.css
Expand Up @@ -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;
Expand All @@ -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 */
Expand All @@ -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;
Expand Down
12 changes: 12 additions & 0 deletions js/app.js
Expand Up @@ -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);

0 comments on commit aefb880

Please sign in to comment.