Re: [css-d] Fwd: clip-path in safari
I just noticed that only in safari on only the affected page I'm getting 404's for `https://tomliv.com/css-d/svg-clip/js/min/scripts-min.js` and `https://tomliv.com/css-d/svg-clip/img/client-logos/` in the console. Not sure if that is the issue or not. Also I came across this page which may be helpful: https://caniuse.com/#feat=css-clip-path On Tue, Apr 10, 2018 at 8:03 PM, Tom Livingston wrote: > Also, adding dimensions to the svg didn’t help. > > > > > > On Tue, Apr 10, 2018 at 7:59 PM Tom Livingston wrote: > >> 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 >> 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 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 >>> > wrote: >>> > >>> >> Hey Tom- >>> >> >>> >> Could this be your issue: >>> >> >>> >> >>> >> >>> https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari >>> >> >>> >>> -- > > 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/ __ 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/
Re: [css-d] Fwd: clip-path in safari
On Wed, Apr 11, 2018 at 9:50 AM, Larry Martell wrote: > I just noticed that only in safari on only the affected page I'm > getting 404's for > `https://tomliv.com/css-d/svg-clip/js/min/scripts-min.js` and > `https://tomliv.com/css-d/svg-clip/img/client-logos/` in the console. > Not sure if that is the issue or not. > > Also I came across this page which may be helpful: > > https://caniuse.com/#feat=css-clip-path > > On Tue, Apr 10, 2018 at 8:03 PM, Tom Livingston wrote: > > Also, adding dimensions to the svg didn’t help. > > > Thanks Larry. Scripts are not involved with this situation. I have read through the caniuse page you referenced and adding the -webkit- prefix didn't help with Safari even though Chrome is happy. This is my first attempt at clip-path so still learning the tricks. Would really love to know whats up with this, though. I am feeling like it's either something silly I missed or the answer lives in the land of the odd and obscure. Incidentally, the issue is also in iOS Safari. FYI, I will be eventually solving this, I think, by adding a class to overlay the svg shape on top of the image using a pseudo element. The learning never ends! :) -- 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/
Re: [css-d] Fwd: clip-path in safari
On Wed, Apr 11, 2018 at 10:46 AM, Tom Livingston wrote: > On Wed, Apr 11, 2018 at 9:50 AM, Larry Martell > wrote: > >> I just noticed that only in safari on only the affected page I'm >> getting 404's for >> `https://tomliv.com/css-d/svg-clip/js/min/scripts-min.js` and >> `https://tomliv.com/css-d/svg-clip/img/client-logos/` in the console. >> Not sure if that is the issue or not. >> >> Also I came across this page which may be helpful: >> >> https://caniuse.com/#feat=css-clip-path >> >> On Tue, Apr 10, 2018 at 8:03 PM, Tom Livingston wrote: >> > Also, adding dimensions to the svg didn’t help. >> > >> > > > Thanks Larry. > > Scripts are not involved with this situation. I didn't think scripts were involved, but I have seen where some error prevented unrelated things from working. > I have read through the > caniuse page you referenced and adding the -webkit- prefix didn't help with > Safari even though Chrome is happy. > > This is my first attempt at clip-path so still learning the tricks. Would > really love to know whats up with this, though. I am feeling like it's > either something silly I missed or the answer lives in the land of the odd > and obscure. > > Incidentally, the issue is also in iOS Safari. > > FYI, I will be eventually solving this, I think, by adding a class to > overlay the svg shape on top of the image using a pseudo element. > > The learning never ends! :) __ 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/
