Chrome iOS - Loading indicator when applying class with jQuery - javascript

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.

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...

Chrome opacity transition z-index issue

I'm working on an angular app and I'm having an issue when adding a '.active' class to a nav item.
Here is a stackblitz link that demonstrates the issue:
https://stackblitz.com/edit/angular-jjqyft?file=app%2Fapp.component.css
Basically, when I click a box, it scales but part of the next box is showing, almost like the active box is transparent. My active class has a z-index of 1 and an opacity of 1.
On Firefox, this doesn't seem to be an issue. Also, I've done something similar using the same technique before (but without any frameworks). This link will show you an example from that project.
I'm not sure if I'm doing something wrong or if it's a Chrome issue. I appreciate any feedback.
EDIT: Just checked on Edge and the same issue is there. So far it seems like Firefox is the only browser where this issue doesn't exist.
Just add position:relative to either the .section a or .active
Such as:
.section a {
display: block;
width: 120px;
height: 80px;
opacity: .5;
transition: all .5s;
position:relative;
}
The reason the clicked element seems as if it has opacity <1 is that the next element is actually "above" it, while having opacity: 0.5;. By "above it" I mean that the next element is further down the DOM tree, hence having a higher stacking order than the previous (currently the clicked one).

Incorrect viewport size causing animations to not excute on scroll

Note: This has been solved. Look at the bottom of this post for the fix.
I have this bizarre issue that I've pulling my hair out over for the past few days. Thankfully I think I've isolated it to an issue with incorrect window / document heights causing my scroll animations to never appear. I'm trying to use the lightSpeedIn animation from animate.css to animate a h2 header in, but wow.js will simply hide the element and never reveal it despite scrolling past it. If I remove wow.js and use only Animate.css the h2 title will animate just fine.
I've done some debugging using the following code and I think I know why wow.js (I've also attempted using other scrolling libraries without success) is breaking - for some reason jQuery is reporting both the window height and document height to be 943. There's clearly a scroll bar on the website, so I'm pretty sure any scroll implementation I do won't work because the code never sees anything to scroll to.
<div id="console">
$(window).height() = <span id="winheight"></span> <br/>
$(document).height() = <span id="docheight"></span>
</div>
Will result in the following appearing on the website.
Implementation with wow.js - doesn't work
<h2 class="section-heading text-center wow lightSpeedIn">Sputnik Fact Sheet</h2>
In this case wow.js seems to be assiging the following style to the header, but it never seems to be toggled.
visibility: hidden; animation-name: none
Implementation with only animate.css - works
<h2 class="section-heading text-center animated lightSpeedIn">Sputnik Fact Sheet</h2>
The strangest fact about this is that the problem only occurs on one part of the website - I've got wow.js working just fine on other parts. Some digging with firebug revealed that animation "lightSpeedIn" doesn't exist when it does. I've even attempted copying and pasting animation names from other areas of the website (e.g. the legacy tab) into the h2 element but it'll always think the animation name doesn't exist.
I'm stumped as to how to go about fixing this. Anyone have any insight into my issue? You can view a live demonstration of this problem here.
UPDATE 1: I thought this might have been a plugin/library incompatibility, so I removed everything but animate.css and wow.js - didn't fix anything. I'm completely stumped.
UPDATE 2: Attempted using other scroll libraries. They don't work either. Narrowed it down to a possible issue with content being "invisible" to the viewport.
UPDATE 3: Found the solution. It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.
Found the solution. It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.
Previous CSS Code
html,body {
height: 100% !important;
margin: 0;
background-color: #161519;
color: #fffafa;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14.5px;
line-height: 1.42857;
max-width: 100%;
overflow-x: hidden
}
Fixed CSS Code
html,body {
height: 100% !important;
margin: 0;
background-color: #161519;
color: #fffafa;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14.5px;
line-height: 1.42857;
max-width: 100%;
}

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

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?

IE6 onscroll glitch

I have a <div> with some content. I gave this div an id attribute, oDIV, and bound a function to the onscroll event via this small script:
window.onload = {
document.getElementById("oDiv").onscroll = function() {
document.getElementById("tooltip").className = "sTooltip";
this.onscroll = null;
};
}
I added some simple CSS to the div, so that a vertical scroll bar would appear. Content stretches down quite a bit and there's a lot to scroll.
#oDiv {
border: 1px solid black;
float: left;
height: 300px;
overflow: auto;
overflow-x: hidden;
padding: 0;
padding-right: 40px;
clear: left;
}
Anyways, if the user tries to scroll I want a tooltip to appear to remind the user that there's a filter option to hide some of the stuff they have to scroll, through.
In Firefox and more current browsers it worked just fine.
The problem I have, is I have to support IE6, and this approach does work in IE6 but there's a slight issue. If you "grab" the scroll bar by left clicking and holding and continue to drag when the event is fired the scroll bar is prematurely released. Forcing the user to again click on the drag bar. It's a minor issue, but I want to know why?
I only intend to fire this event once ever, only when scrolling has initiated.
If a library or framework has solved this odd behavior, could you please show their source to which they address this?
Also, I think timing libraries etc. al for determining the "point at which they stopped scrolling" is way overkill for this.
It could be because IE is pausing to render the "tooltip". Instead of using display:none on your tooltip try to use visibility:hidden and then toggle to visibility:visible.

Categories

Resources