Using the skew is blurring my text?

[jasonzimmermann]

So I'm working on this page... https://info.ipsoft.com/healthcare?hs_preview=ZqOoLhup-6528928147 

I'm using skewY(-10deg) to skew the sections to create the angled effect I want. After some research it seems like skewing sections can cause fonts to blur. Unfortunately the blurring isn't consistent on the page. The middle section and the blue content download are all blurred yet the contact section and blog on the bottom are crisp and using the same skew property. 

Does anyone have any idea why that would be and why I'm seeing different results for the same thing across the page? 

Any help is greatly appreciated! 

[dennisedson]

@jasonzimmermann, if you are just wanting to clip that bottom part of the banner, i would suggest using a clip path

remove your transforms and add this to your div with the background

    clip-path: polygon(50% 0%, 100% 0px, 100% 86%, 50% 100%, 2px 100%, 0px 0px);
}

firefox developer edition has a good tool for messing with the clip path positioning

[jasonzimmermann]

Sorry @dennisedson that's my error. 

[jasonzimmermann]

Thanks @dennisedson. I just tried to apply that style and it doesn't seem to be doing anything though. 

[MitchL]

I haven't tested it, but would using a pseudo element as the background as seen in this solution work:

https://stackoverflow.com/questions/27501435/chrome-text-blurry-when-skew-back-skew-10deg-skew10deg