Tried a 3-line CSS clip-path and it broke on mobile completely

Spent 2 hours debugging a diamond-shaped hero image that worked perfect in Chrome dev tools. Opened it on my iPhone and it was just a squished mess. Anyone else find clip-path units act totally different across browsers?

2 comments

2 Comments

the_caleb5d ago

Heard somewhere that clip-path uses absolute units differently on iOS Safari because it handles the coordinate system based on viewport size instead of the element size. Browser makers still can't agree on how clip-path should scale.

rowanp155d ago

Had a buddy who spent a whole weekend building out this cool hexagonal image grid with clip-path. Looked perfect on his desktop Chrome, every hexagon lined up just right. Then he showed it to me on my iPhone and everything was off... some of the hexagons were cut weird, others were way too small. He was using pixel values for the clip-path points and iOS Safari was treating them against the viewport instead of the actual element size. Ended up having to redo the whole thing with percentage coordinates to make it play nice across browsers.