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.
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.
But when i apply to css code
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.