I'm having a problem with some JavaScript that makes the rollover menu on the right (aligning with the tick mark) work on an Elementor site I'm working on. I had a another dev work on the JavaScript, and I didn't notice this error right away. Now I can't get ahold of him.
The right nav looks perfect and it does exactly what it needs to do in Chrome and Firefox. But I see now that the right nav and tick link does not work in Safari.
Elementor support was kind enough to take a look at it and they said, "...your page has custom CSS for the fixed layout menu and also I found a console error regarding a snippet for the dividers. It seems there is custom code applied to the Elemtor dividers to style the fixed layout menu. This is more a Safari and the custom code/CSS is applied to the page issue.
Despite there being a known issue with the position: fixed CSS rule not working as intended in Safari, I have seen people find a workaround to it. However, the fixed layout menu has many custom CSS and custom code applied. I wasn't able to find an immediate workaround for the many customizations you have.
The only solution I found was to remove the custom CSS position fixed which will depend much on the needs and requirements of the site."
Can anyone point me in the right direction for a fix? Have you come across this problem before with your sites?
Thanks in advance for any help.
The site is here:
[http://farallon-dev.com]
I have an SVG and I am trying to animate the stroke-dashoffset attribute. Originally I wrote code that did it which worked in internet explorer but then I realised it only worked when you went to the page naturally, from a link within the website i am building but when you refresh the page internet explorer decides it doesnt like it and it doesnt work anymore.
I then read online that the snap.svg library is supposed to be IE friendly so I tried implementing it...turns out I can achieve what I had done before with one line of code using snap.svg...i was achieving it in about 50 lines before haha...although didnt have to include snap.svg so im still not sure which is better...anyway...that line of code is:
snapPath.animate({'stroke-dashoffset':stopOffset}, 1000);
snapPath is defiend as:
var snapMap = Snap('#map'),
snapPath = snapMap.select('#route_1_overlay');
and the stopOffset variable is just a number.
I guess my question is why does it work only when I go to the page through another link on my site and then stop working when I refresh? Is it something to do with the headers in IE? (which makes absolutely no sense to me but is the only thing i can think of which might be different?)
At this point i am willing to just make the stroke-dashoffset just jump to the value I give it instead of animating it but I have also tried that with limited success so I am open to suggestions to be able to achieve this in IE as well.
All this being said if anyone has the answer to making it animate in IE I am all ears!
I am only really concerned with IE10+ and Edge.
Cheers!
I've been checking several threads and questions that seemed similar to my current problem but actually wasn't able to find a solution that worked for my case.
I'm currently developing a mobile website which can be found under http://dev.sturbock.me.
The page does have a fixed header with some sub menus beneath it.
As long as the whole page is scrolled all the way up to the top, everything works fine just as expected. Now once you scroll down a bit, open the Menu and try to click one of the links, nothing will happen.
Has anyone of you guys had a similar problem of knows how to fix this? Probably a really easy one but this just got me stuck for a few hours.
Really appreciate your support! Thanks!
Marcel
Issue #1 -
I have read all about different solutions for getting rid of the "white space" in IE within tables, but nothing has worked so far! The page I am working on displays OK in Firefox and all other browsers. I have tried the height=100% command but that makes things so much worse and spaced out, and I have also tried deleting spaces between the different table and td tags but that doesn't change anything either. The images are exactly 115px square or twice that for a horizontal or vertical image.
Issue #2 -
I have an image gallery for each image that is SUPPOSED to appear when clicking on the image. It appears fine in Firefox and Chrome, but IE won't show the image gallery. Help on getting that javascript to work?
You can see our "live" site at www.tracystonearchitect.com (it is just the main home page - the rest of the site is in flash.. which we are working on converting) - it appears 100% correct in Chrome, the spacing issue and image gallery issue shows up in IE, and in Firefox the fonts I used aren't loading right.. which is another issue that I may have already figured out locally, but havent posted the updates yet.
I'm still pretty new at all this coding stuff, so may be a user-error. I've also been trying different techniques to fix these problems so things may be a bit awry based on my trying the different solutions. I'd appreciated any ideas or thoughts on how to fix the space-- or any other code technique comments!
Please help, I really need a solution for this.
As Per Issue #1
Do you have developer tools for your IE. This has become essential for me to troubleshoot and debug web pages. I took a look at your page. In the dev tools look for find in the menu and choose select element by click. Do this for several img. Look to the right of the dev screen and select layout. I noticed the offset varied between different pictures.
See this other SO topic How do I get rid of an element's offset using CSS?. Your on the right track with the css reset i saw in your code. Just keep going. The article mentions positioning as a possible cause.
As Per Issue #2
I wish i had more time to dig into this. I researched the error and found many hits most likely a syntax error. See this SO topic Possible cases for Javascript error: "Expected identifier, string or number"
I hope this points you in the right direction.
I'm currently fighting a very frustrating bug on Safari, and I'm not sure where else to turn.
It seems most elements (but not all, and I can't discern the differentiating factor) that will trigger a focus event will cause all elements on the page that are transitioned or animated to jump ~2px to the top and left. And this only occurs on the first focus event after the page loads.
It's a little annoying to see the bug, as it's in the logged-in portion of droplr.com, and I have been completely unable to distill down a simpler case on JSFiddle.
If you have/create an account and log-in, click on this edit icon for a drop:
You'll see that on the first focus of the page, things jitter. Here's the timeline when there's a single drop on the page and I trigger focus on an offending element:
With more drops, it's just more of the same, but it seems to max out around 40 paints. And the profiler doesn't suggest anything nefarious. Just a trip through jQuery internals.
If instead of laying elements out via a translate3d or matix3d, I simply use top and left, this bug goes away. After hours and hours of debugging this, I'm at a complete loss.
Hoping someone has seen something similar, could take a look, or could give me advice on debugging next steps.
Thanks so much!
Update: Dave Desandro suggested it was the 3d acceleration kicking in, so I tried it out with a translate instead, and sure enough, that did not cause the jitter. I have no idea why the hardware acceleration would be firing up with a focus event though, and only once.
I've tried setting a transformZ of 0 on page load to go ahead and ramp-up the hardware, but no luck there, either. Any more ideas are welcomed.
I've had this issue a while back and honestly I don't remember what exactly was the cause but here are some of the steps I followed:
Check that you don't have hide() and show() for the same element in the next line or vice versa.
Example:
el.show()
el.hide()
Change Custom fonts to "Arial"
For the elements you don't want focus events add this code at the bottom of your scripts:
noFocusElem.off('focus');
This will make sure to remove any focus handlers you might have added by mistake
Finally place your css before any scripts. It's a know fact that adding css rules after an inline style has been applied may cause jitter especially if you're using line-hieght property
Hope this helps :)
I've had this happen when using custom font kits. Could this be the issue? Some events cause custom fonts to re-draw, which can cause a ever so slight "jitter" in page display.
Sometimes, manually setting heights and widths on all the parent HTML elements can reduce the flicker.
I know this question was posted a while ago and this is a bit of a long shot but here goes:
Maybe as a starting point go back to chrome and look at the composite layering:
Hit this into the address bar:
about:flags
You will be able to enable composite borders from within there. The red borders generally indicate a rendering issue:
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
What I have found from time to time is that although there are rendering issues in Chrome the browser copes pretty well with hiding them from me. In other webkit based browsers however the result can be more noticable (i.e. android).
I've also seen flickering occur when z-indexes are being used in conjunction with content that is being transformed.
Either way it would be great to know how you resolved this issue (if you did). Post an answer to your own question perhaps?
A way to avoid spending time fixing load time twitches; you could set the page to hidden then make elements visible with the load. If your page is slow to load, you may want to have a spinner default to visible, then have load hide it. Then you could come back to the issue when you have nothing better to do.
Just my 2c worth.
The first thing I would try:
First in chrome, whack in 'about:flags' (yes I know you're not using Chrome). Find the 'Composited render layer borders' and turn it on. Once this feature is switched on you'll get a rough idea of what is being rendered/hardware accelerated.
See: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
and look for any rendering problems. These are normally caused by z-indexes. Play around with any z-indexes and hide/show certain elements until the rendering issues are resolved. Then work from there. translate-z hacks and opacity can also cause problems.
From experience I've found rendering problems in other webkit browsers can be diagnosed using chrome. Flickering is a common occurrence on the stock android browser.
Secondly: take a look at the focus event itself and try things like preventing the default behaviour. Seems like a long shot to me but give it a go.
I haven't tested this, so I will be very surprised if it works... but here's an idea:
$(document).ready(function() {
$(document).focus(function(e) {
e.preventDefault();
});
$(document).click(function() {
$(document).unbind();
});
});
I've been running into the same issue recently and found something that fixed it in my case.
Check for anything that's hidden offscreen like:
text-indent: -9999px;
left: -9999px;
Removing any instance of these from the 3d accelerated elements (including children) stopped the content jump on focus for me.