CODEWITHSUNDEEP
htmlcsssvgclip-path
Kevin Lieser
Kevin Lieser

Reputation: 977

WebKit CSS3 transition and SVG foreignObject with clipPath is overflowing

I have a svg object with an inline svg clipPath. Evereything seems to be halfway compatible to every modern browser. I just have an issue in WebKit browser like Safari or Google Chrome.

Inline SVG clipping path:

<svg>
    <defs>
        <clipPath id="clippath" clipPathUnits="objectBoundingBox">
            <polygon points="0 1, 0 0, 1 0, 1 1">
        </clipPath>
    </defs>
</svg>

SVG Object for clipped content:

<svg>
    <foreignObject height="100%" width="100%" clip-path="url(#clippath)">
        <div ...>
        <div ...>
        <div ...>
    </foreignObject>
</svg>

When i trigger a CSS3 transition with opacity on the inner elements of the svg object (slideshow) the clipPath gets ignored for the duration of transition.

The clipPath is defined on a "foreignObject". This object is the parent object of the clipped content. I have no idea how to describe it a better way.

Here is just my test HTML project: http://ogs.dev.ka-mediendesign.de/

Is there any solution to get the opacity animation working WITH the clipped path? The slide objects has to be defined as position:static;, because position:absolute; results in the same (clipPath gets ignored in WebKit browser).

enter image description here

Upvotes: 0

Views: 932

Answers (1)

Burak Tokak
Burak Tokak

Reputation: 1850

What about using a div that rotated as a cover?

<div class="clipath" style="
position: absolute;
background: #fff;
height: 200px;
bottom: -150px;
left: -100px;
width: calc(100% + 200px);
z-index: 1;
transform: rotate(-5deg);
"></div>

Add this inside your parallelogram-box parallelogram-svg-path-topflat-true parallelogram-svg-path-bottomflat-false div.

Also give .headline-text-dce z-index:10; Tested it works like a charm.

Fiddle: https://jsfiddle.net/0m17kdrj/1/

Love the design btw.

Upvotes: 0

Related Questions