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.
I am looking to develop a JavaScript web application using the MVC-like principle. While my code is functional, I am facing challenges in implementing it correctly. I have created a global variable called APP where I store controllers, views, and other com ...
I've been working on a tooltip feature that displays data in a message box when hovering over an icon based on its attribute. The following code is implemented for the mouseenter event. <span class='csTip fa fa-info-circle' csTipTerm=&a ...
My current situation involves receiving JSON data from a website and displaying it in a TextView. I have successfully achieved this, however, my boss requires the text to be plain with no paragraphs or empty lines. The text is retrieved from the website&a ...
I am working with an HTML table that has 5 columns, one of which contains dates. I need to convert the date format only if the data is not empty. To achieve this, I am utilizing moment.js for date formatting. While the date format conversion works perfect ...
Is there a way to select and copy a smiley/emoji from a list and paste it into an input field? Although the Inspect Element Q (console log) shows that the emoji is being clicked, I am having trouble transferring it to the input field. Here is the HTML cod ...
Given the code snippet below: <div class="leftBox"> <div class="mainNode" ></div> </div> <script type="text/javascript"> $('.mainNode').click(function() { var element = $('.mainNode'); if (!ele ...
Currently, I am tasked with the challenge of converting an array into objects. Furthermore, I also need to add something before each object is displayed. var arrayList = ["image1.jpg","image2.jpg","image3.jpg"]; The desired outcome should look like this ...
Is it possible to use external CSS frameworks like Bootstrap, Semantic UI, or Foundation and still generate base64 class names? This could be achieved if there was a way to apply multiple class names. Currently, you can only assign one class name like thi ...
I am currently working with Vue.js integrated with Laravel using Elixir and Browserify. I am trying to create custom global filters, each in their own separate file. Despite following the documentation, I am encountering an issue where I receive the follow ...
I encountered an issue with my modal where I wanted to display pre-selected rows, but kept getting a 'cannot read 'grid' of undefined' error. The UI Grids are defined within the modal, and I have declared two Grid APIs with different na ...
The AngularJS guide states that the isolate scope of a directive isolates everything except models explicitly added to the scope: {} hash object. This is useful for building reusable components because it prevents unintended changes to your model state, al ...
I've been working on a contact form that includes inputs and a dropdown selection. To handle the dropdown, I decided to use the ng-Bootstrap library which involves a button, dropdown menu, and dropdown items. However, I'm facing difficulties inte ...
I have been facing challenges with Angular while attempting to recreate a spreadsheet layout in HTML using ng-repeat. Despite extensive research, I have not found a solution. My goal is to display data in a table format as shown below: <table> & ...
Working on a website, I've designed a custom menu that is hidden with 0 opacity and z-index -1. When a button is clicked, the menu will appear on the screen. You can visit to see the site in action. The issue I'm facing is that every time I cl ...
I have a specific method for resetting values in a component page. The process involves navigating from the "new-edition" page to the "my-editions" component and then returning to the original location at "new-edition". I am currently using this approach ...
At the top of my page, I have a div called header_full_width. This div spans 100% of the width of the page. Within this div, there is a container, a row, a col-md-12 div, and an unordered list with list items and links. My issue is that on mobile devices, ...
Currently, I am utilizing the NgbTypeahead component from ng-bootstrap. The issue I am facing is that when I place the typeahead component within a scrollable element and proceed to scroll down, the position of the dropdown container remains unchanged. &l ...
I am facing an issue when trying to display my latest Tweets on my website. Even though everything is working fine on the tweet_json.php, I keep getting the following error when attempting to display them on my site: ReferenceError: listTweets is not defi ...
I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...
There seems to be an issue with the expected data result and the actual data result. Even though the fetchData() and fetchnumberOfCommits() methods are being called from the componentWillMount(), the array is empty at first. However, the render method is b ...