We have a page which works perfectly on all of the modern browsers EXCEPT for a couple of strange behaviors on Microsoft Edge only. Here is the URL:
http://www.oru.edu/online/
Scroll down to the section below "Earn a Fully Accredited Online Degree..." and click one of the photos or one of the degree names. Expected behavior is for a "details" section to slide down and the window to scroll down to it using jQuery's "slideDown" followed by "animate". The animations work well in all tested browsers.
The details section that comes down should contain a description of the degree on the left, and four rectangular clickable areas on the right: "Program Description", "Benefits of Degree", "Occupational Outlook", and "Degree Plan". Also, the background of the details areas should contain a blurred-out version of the picture you may have clicked to open it up.
All of the jQuery animations (slideDown, slideUp, animate, etc.) work in MS Edge, but when the details area slides down, sometimes (randomly, it seems) one or more of the four clickable rectangles does not appear until you hover the mouse over it.
Also at unpredictable intervals, the background image will only show behind part of the div, with the rest of it being a solid blue color.
I've tried changing the order of the jQuery events, I've researched possible changes to the CSS, I've tried it on two completely separate Windows 10 machines, and I can't seem to find anything that causes this to change in the least.
Thanks for any solutions or ideas!
I may have a solution regarding the scrolling issue in jQuery. No promises, but I did have a similar problem as yours once with an auto scrolling issue working in every browser except one. The fix was so tiny that I couldn't believe that one thing was causing such a big problem.
Without seeing your jquery code, I don't know if this the actual solution, but here goes...
Do you have a section of code in the animation portion of your jquery that looks anything like this?
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}
Of course, your code may not start with that "html body" or have "scrollTop" as the exact terms, but here is the point.
There needs to be a comma in between where the "html body" section of code is. In other words, like this...
$("html, body").animate({
scrollTop: $("#" + sectionID).offset().top
}
As I said, your code may be pointing to different divs or elements of your website than my code example is showing, but the concept holds true.
That little comma may be what's keeping your animation from working in Edge. That is what happened to me. In a site I was building I initially didn't have the comma and it worked in EVERY browser I could throw at it, except for Edge. I spent a week on the issue!!!! Finally, I stumbled upon a forum that mentioned the comma and BAM it worked!
Give it a try and please report your results. Good luck!
Related
I know that this is not a 'good question' to pose—but I'm desperate by now and need to find some inspiration.
I have a questionnaire page/web-app that uses CSS transitions to slide to the next page of questions/options.
It is well-tested and the transitions in question aren't complex.
But the transition to one special page went out of control recently. And although I consider myself well versed in CSS and JavaScript I'm totally lost with this problem.
The construct in question works like this:
I have a 'window' that is positioned absolutely and has its overflow hidden.
Inside that is a page container positioned relative to no left or top values or transforms given.
The pages inside this container are positioned absolutely according to their status classes positioned on the left: 0 (active), left 100% (not yet shown), and left: -100% (already done)
What happens now is that when I switch classes to show a certain page, the page container 'jumps to the left'. In Chrome nearly -100% in Firefox about -70% same in Safari.
Those values are my guess because when I open the dev-tools, nothing is to be found in the styles, in the computed values anywhere.
When I move back to the previous page the container jumps back to its original position, and if I move again to the critical page it stays.
I do no positioning whatsoever with JavaScript anywhere, I only switch classes on HTML elements.
After hours of experimenting back and forth, I found out that the problem is in some way JavaScript-related anyhow.
Using the exact same CSS and HTML with a slightly older version of JavaScript does not show the strange behavior. The changes in the Script are mostly ES2020-module related, and the new version does nothing even remotely related to DOM manipulation different from the older working version.
When not using transitions, the shift of the container does not occur.
Has anyone come across something similar?
Does anyone know of other tools to deeper analyze the current layout state of a page more than the respective developer tools of the browsers?
Any other ideas?
Today I found a solution and at least some kind of explanation, but I still have to investigate some more to truly understand the why and how. I'll post an update if I find a better explanation.
The problem has to do with a text field and focus.
The page in question has a text (search) as its main component.
[I am aware and always was that browsers try to move focused elements into view, regardless of what the author's CSS says.
Therefore, when I decided to give focus to the text field which it does not have on its own, as every page movement required a button to be clicked, I did so on transitionend. This has never changed.
When the issue first occurred, one of the things I tried first was to disable that (auto) focus behavior. It did not solve the problem.
I cannot say what made that change in behavior happen. I change the construction of the page to include a grid some time before the issue occurred. That in itself was not the reason, however (it worked for quite some time with that system, and removing it did not sole the behavior).]
What solved the issue was to initially fully disable the text field and only enable it on transitionend (then focusing it).
The reason browsers moved the page to different positions likely has to do with this situation, as the text fields width is ch based.
The important takeaway (for now) for me is, that there is no hint to be found in the developer tools when the browsers moves - elements in the (in my case unsuccessful) attempt to keep inputs in the viewport.
I think that this should be changed/fixed.
I will as soon as I have the time try to better understand the things that made the problem occur, If someone has information or experience with similar situations pleas add useful hints and background info.
So I have this issue with something like old deprecated <marquee>. Here's fiddle: https://jsfiddle.net/qbqz0kay/1/
It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:
how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.
Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.
Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
sorry if asking this question in wrong place.
I have a web page (asp.net / vb) and each section of the web page is built in divs inside a bootstrap grid.
Using the code behind, I am adding onclick events to each bunch of div's to do certain things. Every single div/onclick works on the page apart from just one that will only work if I set the div to something like 100 pixels deep.
I am in safari.
I have tried allsorts - binding with jquery click/tap etc but nothing apart from making the div really large.
I dont understand how only this one div could cause problems.
This text box wont let me paste html in to show.
If anyone could suggest anything I would be really grateful!
C
You are likely facing an issue where you've got one element covering up another. Check to make sure that you don't have any other div's that are too wide and happen to be covering your link on the iPad. This would explain why when you move it to 100 pixels deep it works.
I'm experiencing a very weird chrome (45 and 46 windows only) behaviour with css3 transition using fullpage.js
The transition "freeze" 80% of the time when I'm going from the first to the second section of a website. And then, everything work fine.
Take a look by yourself :
first you will need to login as the website is still under construction.
Http://www.evandorlot.com/wp-login
Login : Guest
Pass: Luckyone
then, come back to the home page www.evandorlot.com
Sroll down, here's the bug. From the first to the second slide of the website, the transitions "freeze" they pop instantly to their final stage.
After pressing ctrl+f5 and trying again, sometime it work, sometime no... it seams to be a chrome bug as it work 20% of the time. But I would like to fix it somehow. For this I need to know what cause the issue.
I'm working on this bug for more than a week now and don't find any solutions:
I tried to disable all the TweenMax animations, then all the css3 animations that are not vital. I also disabled all my custom javascript expet fullpage.js function without any configuration, I tried removing the image from the second slide, deleting the second slide, swapping the second slide with another, replacing the image, the text, deleting the diamond icon, deleting the menu on the bottom right corner, actiavating GPU acceleration by adding CSS3 translateZ to each elements that is animated on the first and second slide... Nothing fixed the bug.
The only way to make it working properly is to empty ALL the content from the second slide and leave the entire section empty. So I guess something cause the issue, but I really don't know what.
I know it's a long shot but if anyone has already experienced similar bug or has a suggestion to fix it. It will be very useful as I'm totally desperate :)