Chrome:Text Blurry When Skew Back:Skew(-10Deg) -> Skew(10Deg)

Chrome : Text blurry when skew back : skew(-10deg) - skew(10deg)

The "blurry text" after 2d or 3d transforms with webkit browsers has been discused many times. But in your case, you can apply the transform only on a pseudo element so that your text isn't affected by the skew property.

It will also alow you to use only one tag in your markup :

@import url(https://fonts.googleapis.com/css?family=Oswald);

body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}

.parent {

    width: 300px;

    overflow: hidden;

    padding-left: 5%;

    position:relative;

}

.parent::before {

    content :'';

    position:absolute;

    top:0;left:0;

    width:100%; height:100%;

    background: rgba(90,190,230,0.9);

    transform-origin:0 0;

    transform:skew(-10deg);

    z-index:-1;

}

<div class="parent">

    Hello

</div>

sKew Issue: How to transform with sKew

If you want to use skew() you can put your text inside a div and use this CSS

.container {

  transform: skewX(-30deg);

  padding: 20px;

  width: 100px;

  background-color: black;

}

.content {

  width: 100px;

  color: white;

  transform: skewX(30deg);

  text-align: center;

  text-transform: uppercase;

}

<div class="container">

    <div class="content">All</div>

</div>

Skew Data with countDistinct

I would recommend to just not use countDistinct at all here and achieve what you want using 2 aggregations in a row especially since you have a skew in your data. It can look like the following:

import pyspark.sql.functions as F
new_df = (df
  .groupBy("product", "date", "client")
  .agg({}) # getting unique ("product", "date", "client") tuples
  .groupBy("product", "date")
  .agg(F.count('*').alias('clients'))
)

First aggregation here ensures that you have a DataFrame with one row per each distinct ("product", "date", "client") tuple, second is counting number of clients for each ("product", "date") pair. This way you don't need to worry about skews anymore since Spark will know to do partial aggregations for you (as opposed to countDistinct which is forced to send all individual "client" values corresponding to each ("product", "date") pair to one node).

skew() function in depth

The mathematical operation that is applied on the <angle> is simply tan(<angle>). It is then inserted in the transformation Matrix.

Ok, that doesn't really goes in depth about skew, nor why it makes sense to use angle rather than a numeric factor. So let's take the following ASCII example showing an x only skew.

   skewX(0)            skewX(45deg)
_|         |_         _|         |_ => original box markers
  a o o o o         a o o o o    
  b o o o o           b o o o o
  c o x o o             c o x o o   <-- this line didn't move
  d o o o o               d o o o o
  e o o o z                 e o o o z
 |         |           |         |

So if we apply the tan(45deg) it gives us a skewX factor of 1.

This means that all the horizontal lines will get displaced by 1 * their distance to the transformation origin.

In above example the transformation origin is the center (x) of the 5*5 image.

So the first pixel line (a o o o o) being at a distance of minus two pixels from the origin, it will get translated by 2px on the left.

The last line (e o o o z) being at +2px from the origin, it will get translated by 2px on the right.

The middle line (c o x o o) being on the origin will not be affected by this transform.

Alright, but that still doesn't explain why bother with angles rather than a factor...

Well the angle notation makes sense too, since we could also explain our example as we rotated every column by 45deg using their center point as anchor.

And even if it is just speculations from my part, angles have the added benefit to allow a skewN(90deg) state which couldn't be represented by a numeric factor.

Blurry text on Chrome when using CSS -webkit-transform

I am not sure this will be a viable solution for fixing blurry text but I have created something that seems to avoid the problem.

The trick I use is to encapsulate all elements that require the transform: skew(-10deg, 0deg) in a container and absolutely position the container behind the text. That way, the text is not subject to any transformation and therefore does not need to be deskewed. I did try separating the text in a different way but the mere proximity to a transformed element was still resulting in blurry text.

I have created 2 demos, this one retains your original HTML and this one using something a bit cleaner and more semantic. It is the latter that I have also included the code for below.

HTML

<article>
    <section>
        <h1>PEC Zwolle v FC Groningen Tickets</h1>
        <p>Football</p>
        <time><strong>04 Apr 2014</strong> | 21:00</time>
    </section>
    <aside>
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg" /><b></b>
    </aside>
</article>

CSS

article, aside {
    font-size: 12px;
    height: 80px;
    width: 365px;
}

article {
    display: inline-block;
    font-family: Arial;
    position:relative;
    margin-left: 25px;
    margin-top: 10px;
}
aside {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    background-color: #f5f5f5;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #c9c9c9;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -webkit-backface-visibility: hidden;
}
img {
    height: 100%;
    width: 125px;
}
aside b {
    right:0;
    top:0;
    position:absolute;
    height: 100%;
    width: 10px;
    background: rgb(30, 143, 30);
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 143, 30, 1)), color-stop(100%, rgba(71, 209, 21, 1)));
    background: -webkit-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -o-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -ms-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: linear-gradient(to bottom, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e8f1e', endColorstr='#47d115', GradientType=0);
}
section {
    color: #323d50;
    height: 100%;
    margin-left:140px;
}
section h1 {
    font-size:15px;
    font-weight:normal;
    margin:5px 0 0;
}
section p {
    color: #9aa7af;
    font-size: 10px;
    margin: 5px 0;
}
time {
    font-size: 12px;
}

---

Related Topics