Expand my Community achievements bar.

AEM 6.3 with cf8 package is causing issue when using Calc function in css

Avatar

Level 8

Hi ,

 

When i am using AEM 6.3 with   service pack1 and cf8 package  installed.

I want to apply clip-path: polygon  for creating a cut angle at right bottom.

 

works:-

When i apply the css inline in the html  that is 

<p  style="clip-path:polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 65px) 100%);">
Stay in the moment.
</p>

 

issue:-

But when i apply to css code

.bottom-right {
p {
clip-path:polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 65px) 100%);
}
}

 

After the page is render it is getting converted to 

clip-path:polygon(0 100%, 0 0, 100% 0, 100% calc(64%), calc(35%) 100%);

 

Here it is treating   px as %  i.e in the above case 36px as 36% due to which the cut is totally broken .please

let me know how this can be fixed.

 

Things i tried to solve:-

I am using YUI compressor and doing minimization of css and also gzip

 

Also i tried in /system/console/configMgr

For Adobe Granite HTML Library configuration changing from yui to gcc i.e:-

JS Processor : min:gcc;obfuscate=true;

CSS Processor: min:gcc;obfuscate=true;

 

But it is not solving the problem. 

 

Could some one provide inputs as why in calc function the px is being treated as % and how could i solve this issue.

 

Thanks

2 Replies