I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser.
While testing in various browsers, everything works smoothly except for Microsoft Edge. In this browser, the logos seem to jump around and appear jerky when scrolling.
Does anyone have any insights into why this is happening and if there is a workaround available?
Instead of relying on Javascript, an alternative approach is to achieve the desired effect using pure CSS.
Check out the example below.
The key is to fix the position of the images and then clip them accordingly. The reason for using a clip container is that while position fixed ignores overflow, it does not ignore clip.
Update: I just tested this snippet in Edge and will investigate any issues that may arise.
img {
width: 200px;
}
.container {
position: relative;
height: 600px;
}
.clipper {
position: absolute;
clip: rect(0, auto, auto, 0);
width: 100%;
height: 100%;
}
.dark {
background: #333;
}
.light {
background: #fff;
}
.gradient {
background: #15EA24;
}
.moveable {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container dark">
<div class="clipper">
<img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg" class="moveable image1">
</div>
</div>
<div class="container light">
<div class="clipper">
<img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable image2">
</div>
</div>
<div class="container gradient">
<div class="clipper">
<img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg" class="moveable image3">
</div>
</div>My technique doesn't rely on Javascript; instead, I send the image to the background and set background-attachment: fixed;:
img {
width: 200px;
}
.container {
overflow: hidden;
position: relative;
min-height: 600px;
}
.dark {
background: #333;
}
.light {
background: #fff;
}
.gradient {
background: #15EA24;
}
.img {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
}
.img1 {
background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg');
}
.img2 {
background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg');
}
.img3 {
background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg');
}<div class="container dark">
<div src="" class="default img img1"></div>
</div>
<div class="container light">
<div src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable img img2"></div>
</div>
<div class="container gradient">
<div src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable img img3"></div>
</div>Hopefully, this method proves useful.
After conducting tests on both MS Edge and Chrome, I discovered that the issue only arises when running the code directly from a Stack Overflow code snippet. However, when running the code locally in either browser, it functions smoothly.
Here are the testing results using the Stack Overflow code snippet:
https://i.stack.imgur.com/wPWvu.gif
Output in MS Edge (Microsoft Edge 42.17134.1.0 / Microsoft EdgeHTML 17.17134):
https://i.stack.imgur.com/LYkCO.gif
Output in Chrome:
https://i.stack.imgur.com/KsXdL.gif
From this analysis, it appears that running the code directly in the browser yields positive results. I recommend conducting your own test to see if you encounter similar outcomes.
When I'm debugging, I want the code to be displayed in Chrome browser (or another browser like Edge) exactly as it was written. Even when using pretty print, the code still appears unreadable. For example, a block of code written in my IDE: {provideD ...
Currently, I am working on a project to create a mastermind game. Everything is progressing smoothly, except for one issue that keeps popping up - I keep encountering the error: "uncaught typeerror cannot read property '0' of undefined." fun ...
I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...
In my XSL document, I have a requirement to generate a hyperlink with text that includes a line break, resulting in two separate sentences. To achieve this, I am utilizing the tokenize function to split words based on whitespace character. <xsl:variab ...
I have forms that allow file uploads (images), and I am trying to restrict the size of those images to 500KB. However, for some reason, the forms are not submitting and I am unsure why. Below is the jQuery code: $('form').on('submit', ...
I have been working on refining a parallax effect to achieve a seamless transition between two positions based on where the mouse exits and enters the window. In the JSFiddle example provided, there is a slight 'pop' that I am looking to replace ...
After running a query and rendering items via the UserList component, I use a button in the UserList to run a mutation for deleting an item. The components are linked, so passing the deleteContact function and using refetch() within it ensures that when a ...
I am aiming to create a function that can accept an object path, like { 'person.data.info.more.favorite': 'smth' } and then output a nested object: { person: { data: { info: { more: { favorite: 'smth& ...
I am in need of a solution to insert a small script onto all of my website pages. The script must include the correct token for each of the 21 different domains I have. However, not all the sites are directly under the 'domain name' but are consi ...
Hello! I'm working with a script that converts data into an array, but I want to enhance it so that I can extract and convert data for each object (arb, astar, aurora, avax, baba, bsc, etc.), as shown in the screenshot. Here is the current script tha ...
Currently, I am utilizing annotator.js to store the range in mysql. The following code fragment is being used for highlighting text within my file: <script src="/js/pdfjs/annotator.js"></script> <script> $(function(){ var annotation ...
Looking for a way to submit a form with checkboxes representing user interests? Clicking a checkbox will send the checked interest value to the database "Followers" table, allowing the user to start following that interest. To handle this, I decided to cre ...
While working with Typescript and firebase-admin for firebase cloud functions, I encountered the error message "Cannot find module 'firebase-admin/app'" when compiling the code with TS. Tried solutions: Reinstalling Dependency Deleting node_modu ...
My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...
I am working with a polymer element that I have defined. The main objective is to make the conversation_container element have a height of 100% so that the message_box_container can be positioned at the bottom of the entire panel using position: absolute; ...
I am encountering two issues that I need help solving. My first problem involves stretching out the navigation bar to fill the height and length of the adjacent div (div#textarea) while also keeping the text of the menu centered within that div. The seco ...
I'm completely new to React and I decided to create a basic comments application. My main objective was to let users change their display pictures by clicking the 'Change Avatar' button. However, I encountered an issue where the 'Chang ...
Struggling to convert a jQuery template to Angular7, I'm facing an issue with loading .js files from the assets folder in the original template to make it functional. Upon starting the application with: ng serve, I encounter the following error in th ...
Within my server file, there is a function that retrieves a specific set of data based on an ID. app.get('/musicbyid', function(req, res){ var query = req.query.term.toLowerCase(); music.find({ _id: query }, function(err, allMusic){ ...
My web app contains multiple tree views. Upon loading the page, I first see the unordered lists before the styling of the trees is displayed in the DOM after a brief delay. Is there a method to mask the web app with a spinner placed in the center of the s ...