Skrollr classes being added, but transition is not occurring on svg path - wordpress
I'm trying to set up some svg paths with skrollr on this page of my site: http://erinwilder.me/portfolio/main-street/
I have the latest version of skrollr called in my footer (it came with my theme). I added the skrollr init, but I have also tested without it.
This is the code I am using for my svg:
<svg id="imac" width="555px" height="444px"><path id="imac-inner" style="fill:none; stroke:#000000; stroke-width:2; stroke-linecap:round; stroke-dasharray: 4565; stroke-dashoffset: 4565;" data-0="stroke-dashoffset: 4565;" data-end="stroke-dashoffset:0;" d="M183.53,439.19v2.61c0,1,30.71,1.19,58.06,1.19,13.84,0,27.18,0,35.28,0s21.21,0,35,0c27.35,0,57.59-.18,57.59-1.19v-2.61m-184.2.13c2.46,0.24,7.31.42,16.83,0.57s22.43,0.22,39.67.22c8.52,0,16.6,0,23.72,0l11.59,0,11.59,0c7.12,0,15.2,0,23.72,0,17.24,0,30.22-.07,39.68-0.22s14.36-.33,16.83-0.57l0.78-.09c1.77-.23,1.77-0.51,1.77-0.85V437c0-.9-1.31-1.22-10.77-2.67-5.29-.81-11.28-1.73-13.25-2.59-0.4-.18-2.56-2.2-5.32-26.1-1-8.82-1.82-17.92-2.24-24.84H536.15c8.85,0,15.36-7.31,15.36-16.16V17.88C551.51,9,545,2,536.15,2H19.21C10.35,2,2.5,9,2.5,17.88v346.8c0,8.85,7.85,16.16,16.71,16.16H214.32c-0.43,6.92-1.22,16-2.24,24.84-2.76,23.9-4.91,26-5.32,26.13-2,.86-8.06,1.76-13.35,2.57-9.46,1.45-10.87,1.76-10.87,2.65v1.35c0,0.34.1,0.62,1.87,0.85ZM552.5,330.39H3.49M529.75,26.32a1.57,1.57,0,0,0-1.57-1.57H25.83a1.57,1.57,0,0,0-1.57,1.57V308a1.57,1.57,0,0,0,1.57,1.57H528.18a1.57,1.57,0,0,0,1.57-1.57V26.32ZM277.68,15.48a2.09,2.09,0,1,0-2.09-2.09A2.09,2.09,0,0,0,277.68,15.48Zm0,349.44a9.32,9.32,0,1,0-9.33-9.32A9.32,9.32,0,0,0,277.68,364.93Zm62.14,15.9H214.19"></svg>
On the page, there should be a computer drawing itself around the outlined image in the section title "The Website."
Does anyone know what I am doing wrong here?
Related
How To Add Border Radius For Call To Action Element In Elementor
Today I was adding a Call To Action element in elementor and I set an image as the background and I changed the border radius to 5 (Under advanced> border> radius) and the border appears rounded on the editor and the preview but when I view the page from my device (iPhone) the image in the call to action is not rounded like it appears in the editor or preview. I tried playing around with it and I figured out that the border will apply if you have a color as a background of the call to action but will not apply if you have an image as a background. I've had the same issue before with the Slides Widget however I was able to resolve this by using some CSS
selector .swiper-slide-bg, selector .elementor-background-overlay { border-radius: 20px!important; }
,that I found on this article: https://mcstarters.com/blog/add-border-radius-to-the-elementor-slider-element/ . I then tried to create my own code:
selector .elementor-cta-background-overlay {
border-radius: 20px!important;
}
But this did not solve the issue. This is not a plugin or theme conflict I created brand new websites with nothing but Elemntor and pro installed and still had the same result. If anyone is able to figure this I would GREATLY appreciate it as I've spent HOURS online trying to find some CSS to solve this with no luck. Even reached out to Elemntor support out of desperation but even THEY can't figure it out. Any CSS Code Would be appreciated thanks.
[These Are Some Images To Help]
[What Elemntor Preview Looks Like]: https://i.stack.imgur.com/D7DiF.jpg
[What it looks like on my Device]: https://www.icloud.com/photos/#0e6G2hxKFShWs5dENCe5VGfpg
This worked for me:
.elementor-cta .elementor-cta__bg-wrapper {
border-radius: 12px!important;
}
Icon not rendering properly in Firefox when adding them by SASS
I'm trying to override an icon in an angularjs component that I have no control over. It's a stepper library called md-steppers. I was able to change the current step icon in chrome. Here is how I did it.
/* ... */
&.md-active md-step-label-wrapper {
font-weight: bolder;
display: flex;
&:before {
font-family: 'Material Icons';
content: '\E150';
color: white;
}
}
/* ... */
As you can see I'm altering the icon by loading the font Material Icons and then changing the content.
This solution is working great in Chrome. I'm having a few problems in firefox, however. The icons does not seem to be rendering properly when I'm at 100% ( or less ) zoom. Everything above that seems fine.
You can compare the image above with the result on Chrome ( both at 100% zoom )
The result on Firefox seams a little bit Blurrier and not well formed.
I'm aware that this might be a bug in Firefox itself as it has been reported before. I saw a few workaround that revolve around the mask css property but I'm not sure it can apply to me, since i'm not using mask at all. This is assuming the icons are rendered as SVG.
I've already look up CSS - Using SVG mask not displaying correctly in Firefox and Firefox not rendering svg properly on the topics but I could not make it work.
Am I missing something here and what can I do to correct this ?
Here is a Jsfiddle with the problem occurring.
The problem seams to be present in the iframe, in chrome as well.
Disclaimer: I can't verify that any of the solutions I've written below work as I can't replicate the issue on my device in the JSFiddle you provided.
It displays fine for me in Firefox and Chrome. FWIW: I'm using a Mac
Mini on MacOS 10.14.6 with a 4K display # 1920 x 1080 (i.e. HiDPI).
The same browser (i.e. Firefox) may handle fonts differently on
depending on operating system and hardware setup.
Solution
The demo link for md-steppers uses SVG data in the CSS:
.md-step.md-complete md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; }
See Line 398
I would probably try using this same method and avoid using the icon font if you think this is where the issue is arising from. If you also have the same issue in Firefox at the md-steppers demo link above then I guess the issue is bigger than just icon fonts and is also affecting SVGs. You can scroll down further to: Other Possible Fixes.
The Material Design icons can be downloaded in SVG format from here.
Use the search filter in the sidebar and type in edit for the icon you want, then press the [Download] SVG 24 button in the bottom left corner.
The icon you download will be the default black colour so there are some changes you will need to make in order to make it suitable for you to use.
Open up the downloaded SVG in a code editor and refer to the way the SVG is formatted in the CSS for the md-steppers demo. Change the height and width properties, and also add the fill property to the <svg> tag, so it should look something like:
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="rgba(255,255,255,0.87)"><path ...leave as is... /><path ...leave as is... /></svg>
Copy the SVG code as a single line and use it in a similar way that it's used in the md-steppers demo CSS:
.md-step.md-active md-step-label-wrapper::before, .md-step.md-success md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat center center;
}
JSFiddle: https://jsfiddle.net/wx0brdjL/
Alternatively, you can save the SVG after you modify the width/height/fill to a file, then reference it in your CSS like:
background-image: url('edit-24px.svg');
Other Possible Fixes:
If using the SVG above is still causing things to blur on Firefox, or if you want to stick with using the icon font, there are a few things to try which might fix the way that the icon font renders on your device:
Option 1
Applying transform: translateZ(0) to either &.md-active md-step-label-wrapper or &:before.
Option 2
Applying the font-smoothing (see Firefox specific vendor prefix) or text-rendering CSS properties. Keeping in mind that changes here might affect the way it renders on someone else's device.
Option 3
I just came across this open issue on the Material Design Icons Github where a user recommends using this CSS hack: transform: rotate(0.03deg)
I can't reproduce this issue with the jsfiddle you supplied (all icons look okay for me). But I have had similar issues myself with other font-icons. I think the issue comes from the font-weight: bolder; you've added to the parent element in your code. The browser now also wants to make the icon bolder, but since there isn't a "bolder"-version of the icon the browser tries to do it by itself and thereby making the icon look weird. Your fiddle doesn't have the font-weight: bolder;, so im thinking your issue might have something to do with that. Try and remove it and see if the issue still persists.
Having issues with svg files from libre maps
For a while I thought there was something wrong with my code, but it looks like there is an issue with the svg files on libre maps. I've been trying to use their svg files with jvectormaps but they wouldn't work no matter what. Then I tried to use object and the img tag to just embed them, and they still won't work so obviously there's something wrong with these svg files. I tried a few things such as removing the xml tag, and updating the doctype, but still no luck. This is one of the files I'm having an issue with. http://libremap.org/data/boundary/2000/sub_county/svg/cs42_d00.svg
Yes. There is a problem with their SVGs. The root <svg> element should have an xmlns attribute, but it doesn't.
Eg. the map you linked to starts with:
<svg width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
it should be:
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
Standalone SVGs must have the namespace attribute. You should probably report it as a bug to them.
In the meantime, you can download the SVG and correct it yourself. Then use your local copy.
Update
There is another issue with the SVG. It has fill set to none and stroke-width set to 0 (see line 8). So nothing will display by default. If you change either of those (see line 8), it will display.
<g id="Unknown_Area_Type_cs42_d00_e00" style="fill:grey;stroke:rgb(255,0,0);
stroke-width:0.01;stroke-linecap:round">
Perhaps it was intended that you use CSS to style the map. Having something like the following should also work:
g#Unknown_Area_Type_cs42_d00_e00 *
{
fill: grey;
stroke:rgb(255,0,0);
stroke-width:0.01;
}
How use an SVG image as a background?
I must be doing something wrong. The image was exported from illustrator as an SVG and (I'm not sure whether this is relevant or not) it does have some pixel data in it. Here's my JSFiddle example. Note that going directly to the image, it shows up just fine: http://ykcreations.com/tv.svg Edit: This does not work in Chrome or Safari but DOES in Firefox. Webkit issue?
There is a problem with your source SVG. See this updated Fiddle pointing to a different SVG file that works correctly: http://jsfiddle.net/wdW2K/2/
.tv {
background: url("http://phrogz.net/svg/800x800.svg");
width: 400px; height: 400px;
}
Edit: Specifically, the problem appears to be that WebKit does not support <image> in an SVG used as a background. Modifying your file minimally to change the <image> to reference a local (non-data-uri) file, and adding a <circle/>, I was able to see both the image and circle when viewing the SVG directly in Chrome, but when used as a background image only the circle was visible.
This bug smells relevant.
It has to do with your image, try plugging the following into your CSS:
.tv
{
background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
width: 400px;
height: 400px;
}
Perhaps your SVG is actually an SVGZ? SVGZ files are the compressed versions of SVG files. Usually you have to configure your server to handle that, but FF may just be able to deal with the compressed versions.
EDIT
See Phrogz's answer below (possibly above by the time you read this); it covers this and gives a better explanation.
Another possible cause is serving the SVG with the wrong MIME type. Setting it to 'image/svg+xml' may fix the issue. In Rails, this can be done by adding the following to config/intializers/mime_types.rb: Mime::Type.register 'image/svg+xml', :svg
I had a simmilar problem with rendering svg as background image in Chrome, but everything was fine in Firefox. I found out that there was a syntax error inside my svg files exported from Adobe: wrong xlink attribute: xlink:href="data:img/png;base64 correct xlink attribute: xlink:href="data:image/png;base64 Article bellow: Link to article from css-trick that helped me
Facebook like popup has inverted opacity settings (mouseover/mouseout)
I have a strange problem with my facebook like button. Normally, when you click 'like' on a site, you get a popup for a comment. This popup has 100% opacity on mouseover, but reduced opacity on mouseout. However, on my site, this is reversed. I get 100% opacity on mouseout, and reduced opacity on mouseover. Obviously, this makes it difficult to use. Here's my site: http://notts-squash.co.uk/results.html?table=teams&idd=440&season=10&social=true. (To test on other pages, add &social=true to the URL.) Many thanks in advance! This has been confusing me for weeks.
The CSS from widget72.css is causing the transaprency:
.at300b:hover {
opacity: 0.8;
}
You could change your CSS file to :
.at300b:hover {
opacity: 1;
}
As long as your CSS file comes after widget72.css (which I assume your are hot-linking to) then this should fix the problem. Otherwise you can add !important to the code in your CSS file.
Edit
If you wanted the children to have the opacity: 0.8 (in the pop-up) when you are not hovering then you could try the following:
.at300b > * {
opacity: 0.8;
}
.at300b:hover, .at300b:hover > * {
opacity: 1;
}
This is a bit of a hack but would work incase you never find why you are getting this behavour.
I can't figure it out as of yet, however, first thing I'd recommend is to change from fbml to html5 style tags for the like plugin. If that doesn't work, try taking the like plugin out of the complexity of the results.html page and place into a page with minimal HTML elements. If that works, then you will need to start with a bare bones version of the results.html page and start adding in element/block of HTML at a time until the plugin breaks. This will tell you what HTML is causing problems with the like plugin.