Both width and max-width of 100% is unnecessary, you are right. I think it’s a left over from grabbing at straws. The dimensions on the svg was something I saw on an example by Sara Soueidan. It also keeps it from taking up space in the layout. Keep in mind the svg is for a clippath, not an image on the page.
On Tue, Apr 10, 2018 at 6:32 PM Larry Martell <larry.mart...@gmail.com> wrote: > Just curious, why max-width instead of width since its 100% it seems > unnecessary. Also the svg has width height set to 0 - any particular > reason for that? > > On Tue, Apr 10, 2018 at 6:26 PM, Tom Livingston <tom...@gmail.com> wrote: > > Thanks Larry. I am using the -webkit prefix. After further poking around > I > > found that if I make the images parent or parent’s parent position fixed, > > it shows correctly but in an odd place ( not that fixed is gonna work for > > me anyway) and if I take the width off the image parent I see the image > and > > clippath but it’s not right. It’s odd. > > > > I have to abandon this method anyway as the lack of support in Edge is a > > deal breaker for this but i’d still like to know what’s happening. > > > > > > On Tue, Apr 10, 2018 at 6:18 PM Larry Martell <larry.mart...@gmail.com> > > wrote: > > > >> Hey Tom- > >> > >> Could this be your issue: > >> > >> > >> > https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari > >> > >> On Tue, Apr 10, 2018 at 3:51 PM, Tom Livingston <tom...@gmail.com> > wrote: > >> > Upon further investigation, a simpler page works in Safari. So now my > >> > question is what's the difference? > >> > > >> > https://tomliv.com/css-d/svg-clip/index.html > >> > > >> > https://tomliv.com/css-d/svg-clip/test.html > >> > > >> > Thanks! > >> > > >> > > >> > ---------- Forwarded message ---------- > >> > From: Tom Livingston <tom...@gmail.com> > >> > Date: Tue, Apr 10, 2018 at 3:10 PM > >> > Subject: clip-path in safari > >> > To: CSS Discussion Group <cs...@lists.css-discuss.org> > >> > > >> > > >> > Hello listers, > >> > > >> > Long time no email. > >> > > >> > Can anyone tell me why the following isn't working in Safari but > works in > >> > FF and Chrome (all 3 are current versions)? > >> > > >> > .avatar img{ > >> > display: block; > >> > max-width: 100%; > >> > -webkit-clip-path: url(#talkbubble); > >> > clip-path: url(#talkbubble); > >> > } > >> > > >> > <div class="avatar"><img src="img/headshot-FPO.jpg" alt=""></div> > >> > > >> > <svg width="0" height="0"> > >> > <defs> > >> > <clipPath id="talkbubble" clipPathUnits="objectBoundingBox" > >> > transform="scale(0.01117647)"> > >> > <polygon points="0 0 0 75 66 75 85 85 75 66 75 0 0 0"/> > >> > </clipPath> > >> > </defs> > >> > </svg> > >> > > >> > Thanks! > >> > > >> > > >> > > >> > -- > >> > > >> > Tom Livingston | Senior Front End Developer | Media Logic | > >> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > >> > > >> > > >> > #663399 > >> > ______________________________________________________________________ > >> > css-discuss [css-d@css-discuss.org] > >> > http://www.css-discuss.org/mailman/listinfo/css-d > >> > List wiki/FAQ -- http://css-discuss.incutio.com/ > >> > List policies -- http://css-discuss.org/policies.html > >> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > >> > > -- > > > > Tom Livingston | Senior Front End Developer | Media Logic | > > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > > > > #663399 > > ______________________________________________________________________ > > css-discuss [css-d@css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
