Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

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