Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 25
Level 4
srinivas_chann1
Level 4

Likes

21 likes

Total Posts

222 posts

Correct Reply

6 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
Level 4
srinivas_chann1
Level 4

Likes

21 likes

Total Posts

222 posts

Correct Reply

6 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
srinivas_chann1
Level 4

15-09-2020

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

Accepted Solutions (0)

Answers (0)