Safari - Jumpy animation in Safari using jQuery Animate - Fine in FF & Chrome - javascript

I'm trying to animate the opening and closing of a menu. I'm doing this in two places on the site. One place is working fine and the other place is not.
http://rob-s-williams.com/development/
For example, here I am opening and closing the menu by clicking 'Project info' (navigated to Ben Eine project)
Great, works fine in Safari.
However, on the homepage when I am trying to open and close the menu - in Safari it's jumpy and not very smooth. Please see this page below and click on projects, about or contact (in Safari)
I am doing this the same way for each.
For example, initially I set the element like this
.mm-info {
width: 400px;
z-index: 1;
left: -1000px;
background: #fff;
position: absolute;
top: 0;
height: 100%;
}
then when I click on the element I am
var mainmenu_info_panel = $(mainmenu_info);
mainmenu_info_panel.animate({"left":"0px"}, "slow").addClass('visible');
$(mainmenu_projects_panel).fadeIn(1000);
Exact code can be found here
https://github.com/twotwentytwo/rob-s-williams/blob/master/scripts/modules/menu.js
Line 73
Please note I am yet to refactor some of this code, so yes it's a little bit repetitive and needs serious refactoring.
I seem to be doing the same thing in 2 places, one works one doesn't.
I have tried :
Removing the elements on the homepage, apart from the menu items and some test content in the menu and this doesn't work
I replaced the animation with CSS animation - that didn't work.
I'm at a bit of a loss.
Anyone able to help please?

Related

Input element click on mobile device browser behaves differently than in Chrome device rendering

I have a hard to debug issue where a click on an input element behaves completely different on my Samsung S10 than in my desktop Chrome browser (also when using device testing tools).
Here's how to test:
on a small mobile design (max-width: 56em) a blue filter bar appears at the bottom of the screen
Click it to show all filters, a popup menu appears (you can go back to results by clicking button "Bekijk resultaten")
Click "+ Specificeer" at the bottom of that screen
In the small range specification popup that appears click the first input element (placeholder="van")
In Chrome on desktop the user can now enter a number. Also when I use Chrome device debugging tools and set it to iPhoneX, Galaxy S5, Galaxy Fold rendering etcetera it works just fine.
But when I load my live site on my Galaxy S10 in the Chrome browser, the moment the user clicks the input element to enter a number, the rest of the filter popup menu is hidden, and it only shows part of the range specification popup. Scrolling of the page is completely disabled. I'm thinking that certain events are handled differently, but I can't figure out which ones and why.
I tried monitoring events using monitorEvents(window,"click");, but no click events show
Logged events via Performance tab, but could not find the culprit
I have no idea why anymore and I can't reproduce it in Chrome desktop browser to actually debug it.
UPDATE 1
The issue was the mobile virtual keyboard that trigger the resize method.
Fixed it by checking for width change:
var initialWidth = $(window).width(), initialHeight = $(window).height();
window.addEventListener('resize', function () {
if ($(window).width() != initialWidth) {//the width was changed
}
})
Well, I've played around. illusion is totally right.
I've copied some styles from .filters .mobile class to .filters_TEST
.filters_TEST{
&.active{
height: auto;
flex-grow:1;
overflow: auto;
opacity: 1;
z-index: 100;
padding: 0;
background-color: #FFF!important;
min-height: 100vh;
.modal_container{
background-color: #fff;
overflow: auto;
overflow-x: hidden;
position: relative;
width: 100%;
height: 100vh;
overflow-y: hidden;
#mobilefilters{
display:block;
}
}
}
}
added test button:
<span class="js-callmodal display-mobile-only">CALL MODAL</span>
and on button click added new class to .
$('.js-callmodal').on('click',function(){
$('.filters_TEST').addClass('active');
});
now when you click:
CALL MODAL -> Specificeer -> input
modal stays in place;
to truly fix your problem you should search what removes .mobile class when input is triggered.
I guess the code should be somewhere in file: _genfuncs.min.js?v=90
While debugging, I found that when the input is in focus and the keyboard pops up, that instant .mobile class is removed from section.filters. You'll have to see for any event handler that removes the .mobile class on any event. Secondly, after the bug was encountered I again added the removed .mobile class manually to section.filters and the modal was back in place working properly. After clicking "Specificeer" it gives rise to another bug, where the main page becomes unscrollable. Also at the same instant there is another error TypeError which could possibly be the cause of the other bug...

Remove swipe away for mobile nav from Jekyll Theme (Sera)

I am trying to remove a nagging feature from a Jekyll theme I am using. The theme is called Sera by Gleesik. In essence, the mobile nabber is toggled by hitting the hamburger, the navbar pops in, and the hamburger turns into an X which can be used to close the navbar. However, it seems there is some CSS or JS that also enables the navbar to be swiped away, this is problematic because I have a rather large navbar now, and so when a user (on a phone) tries to scroll they sometimes cause the navbar to swipe to close. While it is a neat feature, I can live with only the X providing the close functionality.
Link to live preview of the theme - need to use it as mobile to see what I'm talking about
Also, I've not pasted in the CSS as even the scss file for header-responsive is too large for here. I understand this isn't the best question for here, but I am totally stuck. Even if someone could point me towards a css or js feature that does what I describe above, that would be a tremendous help since I don't even know what I am looking for.
On discussion with a friend he suggested I paste this JS from the project:
// Close Mobile Menu
$nav_menu.removeClass('active');
$toggle_menu_button.removeClass('active');
$body.removeClass('no-scroll');
});
// Toggle Mobile Menu
$toggle_menu_button.on('click', function() {
$nav_menu.toggleClass('active');
$body.toggleClass('no-scroll');
$(this).toggleClass('active');
});
Reurning yet again with some CSS this time, I've isolated the following.
// No Scroll - Lock body scrolling.
&.no-scroll {
height: 100vh;
overflow-y: hidden;
.site-header .container {
&:before {
width: auto;
height: auto;
background-color: $black-transparent;
}
}
}
Edit: Not really an answer, but this is what I did, I removed the following which was found down the page:
$window.on('resize', function() {
$nav_menu.removeClass('active');
$body.removeClass('no-scroll');
$toggle_menu_button.removeClass('active');
});
Good enough I guess, kinda bummed that iOS seems to break standards w/r/t this issue. Maybe I'm totally off base, who knows.
Thank You.

Chrome iOS - Loading indicator when applying class with jQuery

For some reason, my page displays the loading indicator on Chrome, when applying a class to a section with css transition. The class adds a bottom value that makes the section slide up. And I think this loading is causing the address bar to be 'active', and won't slide up again. And thus covering my navigation bar. I'm using iPhone 4, iOS5.
I've tried to pin-point what might be causing this, because it's not there on desktop Chrome, or on Safari on the iphone. And it only happens while the class is being applied, and the animation is activated, and also after.
The page has a google map, and I'm collecting data from an XML document using $.ajax. This is however not causing the problem, cause I've tried disabling everything in the js-file, except the click handler that applies the class.
Here's the CSS:
#main_bottom {
position: absolute;
bottom: -297px;
width: 300%;
height: 384px;
background-color: #ececec;
-webkit-transition-property: bottom, left;
-webkit-transition-duration: 0.2s;
}
#main_bottom.active {
bottom: 36px;
}
I'm using this to apply the class:
$(document).on('click', '#main_bottom > section:not(#gps) > a', function (e){
e.preventDefault();
$($main_bottom).toggleClass('active');
});
HTML:
<a href="/">Choose nearest shop
<div class="bigarrow"></div>
</a>
What could be causing this? It seems to be related to the animation somehow, not sure why. Could it be the absolute positioning, along with the css transition? If I'm allowed to link to the current live site, I'd be happy to do that :)
I found it was because of the <a href="/">. Even though e.preventDefault(); was set, this still caused Chrome to do 'something' with the href.

positioning of sub menus in jquery menu combined with stumbleupon toolbar goes wrong

Script Title: dropline menu
Script URL: http://www.dynamicdrive.com/style/cs...rop_line_menu/
I got the menu working just fine, however, I discovered that when I have the stumble upon toolbar on, the submenu suddenly is placed about 22px lower than it should be. Sometimes this increases to multiple times that difference. You can test out this behavior for yourself in Chrome browser, having the stumbleupon toolbar enabled and hovering over one of the menu items which has a submenu: http://kwestievan.nl/unityexpress/
How can I fix this? I checked if body.offset().top was the problem, but actually that one is higher than the difference: 32px, while the difference in the menu is only 22px.
The reason the sub menu is lower beacuse the element
<ul class="sub-menu"</ul>
is being given a style of
position: absolute;
left: 233px;
top: 224px;
What this does is place the sub-menu "RELATIVE" to the browser window as such that it is 223px from the left and 224px from the top of the "browser window". This works fine when there is no "stumbleupon" toolbar. However when you do add the stumbleupon toolbar, it adds the toolbar in the form of a iframe element. The height of the iframe element than causes the sub-menu to be pushed down since the dimensions of the browser window have changed.
You can quickly test this by finding out the height of the "stumbleupon" toolbar and than comparing that height to the amount of distance the sub-menu has pushed down on you monitor/screen resolution. They will be same.
The solution is to give the element
<li id="menu-item-1738"</li>
a style of
position: relative;
and than style the sub-menu so that it aligns and is "absolutely" positioned "RELATIVE" to the containing li element. For example
position: absolute;
top: 20px;
left: 15px;
Offcourse all this is being done by your script. I am not sure why are you using javascript for this. This can be easily acheived by CSS alone.

Firefox page "moves" when hiding/showing divs

We have a web page with this general structure:
<div id="container">
<div id="basicSearch">...</div>
<div id="advancedSearch" style="display: none">...</div>
<div>
With this CSS:
#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}
We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:
var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
advanced.style.display = '';
basic.style.display = 'none';
} else {
basic.style.display = '';
advanced.style.display = 'none';
}
This all works great in IE.
It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?
Is it causing a scrollbar to appear / disappear?
Toggling content can make the page content taller. Check whether this makes a scrollbar appear, as this will affect the page width slightly.
What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }
Here's a good related SO post.
Check your XHTML is well formed, sounds like a dangling DIV (firebug will help with this).
On a side note jquery has some really nice animations that make this switch much nicer on the eyes.
I don't know why, but if you install Firebug a Firefox plug in you can use it to debug your problem.
Firebug has saved my hours of debugging time when it comes to CSS and showing and hiding divs.
With firebug you can view what may be different between the two divs.
From firefox, just choose the Tools Menu, then click Ad-Ons, then click Get Ad-Ons and search for firebug.
One thing that you could try is to hide before you show, this may have less flicker. If you are causing the page to get taller, this could be the source of your trouble.
I hope this helps.

Categories

Resources