Just putting the final touches on my latest project at . I applied the bootstrap .sticky-top class to the navbar, but in Chrome, there seems to be a small 1px gap above the navbar where you can see the content behind it. This issue doesn't occur in Safari. Any suggestions for resolving this would be greatly appreciated!
Update: I tested it on my girlfriend's computer and it displays properly there.
UPDATE:
I stumbled upon this interesting link: https://bugs.chromium.org/p/chromium/issues/detail?id=810352&q=sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
It's not just a Bootstrap issue.
https://codepen.io/anon/pen/vdgzdb
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
}
.content {
height: 50px;
}<h1>Animals by Alphabet</h1>
<div class="container">
<div class="heading">A</div>
<div class="content">American Buffalo</div>
<div class="content">Aardvark</div>
<div class="content">Alligator</div>
<div class="content">Antelope</div>
<div class="heading">B</div>
<div class="content">Baboon</div>
<div class="content">Bat</div>
<div class="content">Blue Bird</div>
<div class="heading">C</div>
<div class="content">Cat</div>
<div class="content">Camel</div>
<div class="content">Chicken</div>
<div class="content">Chipmunk</div>
<div class="heading">D</div>
<div>Dog</div>
<div>Donkey</div>
<div>Dave</div>
<div>Duck</div>
</div>The issue occurs when the sticky element is positioned below other divs.
Removing the h1 element resolves the problem.
However, in some cases, an element like that has to be present. I placed a sticky-ed element under an img tag, causing a 1px gap to appear. Setting a specific height for the img solves the issue.
This behavior seems to be specific to Chrome-like browsers. The performance is flawless on wkwebview on iOS and Safari on iOS/macOS. On Android webview which supports blink, there is a noticeable 1px gap.
After observing, I have found that the problem occurs specifically when the navigation bar is set to sticky, and the Bootstrap Carousel starts sliding beneath the navbar. Hopefully, this insight will assist others in troubleshooting similar issues.
I have been having difficulty finding a solution to my problem despite trying multiple topics. My English skills are not the best, but I hope to explain my issue as clearly as possible. After clicking on this div, I would like to block the display and sho ...
I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...
In the process of creating a responsive menu, I have designed a navbar for desktop that includes 3 text links and 3 small pictures that are also links. However, when transitioning to a smaller screen size, my goal is to keep the 3 small pictures as they a ...
I've encountered an issue with my responsive design. While all elements adjust properly when resizing the height and width of the browser, the background image only changes when I resize the height. When I resize the width, it remains the same. Origi ...
After reviewing these two questions: How To Add CSS3 Transition With HTML5 details/summary tag reveal? How to make <'details'> drop down on mouse hover Here's a new question for you! Issue I am trying to create an animation when t ...
I attempted to dynamically change the LESS variable using HTML within an AngularJS function. The code worked fine on XAMPP with simple HTML and CSS, but when I transferred it to an enterprise app in Visual Studio, it stopped functioning properly. While the ...
As a novice in the world of Javascript, I am currently attempting to select an element within an array of images where the opacity is set to 1. Could someone please guide me on how to achieve this? I've tried using hasAttribute, but I'm unsure ho ...
Spa.blade.php file <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <title>SPA</title> <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,4 ...
I am currently facing an issue with a textbox in the center of my screen - when I click on it, no actions are registered. This leads me to believe that there may be a CSS Z-Index problem at play here. How can I troubleshoot and correct this issue effective ...
Currently, I am in the process of constructing a web application using Python 3.6, Flask, Bootstrap4, and Postgresql on a Windows 10 operating system. At this point, I am incorporating placeholder data to test the functionality of the application, running ...
I am currently facing a small issue while working on my new website, www.dvpwebdesign.com. The problem arises in Internet Explorer (IE) when the intro page displays a repeated gradient background with text and links overlaid on it. While the layout works ...
Within my Joomla website using the T3 template, I inserted the following "Custom Code" just before the closing </head> tag: <style type="text/stylesheet"> div.t3-sidebar.t3-sidebar-right{ background: #F8F8F8 none repeat scroll 0% 0%; ...
One of my clients recently requested a submit button with 2 words and 3 different text colors: <input type="submit" value="SUBMIT NEWSLETTER" /> The color scheme for the text is as follows: SUBMIT = black, NEWS = black, LET = white, TER = black. I ...
Visit to see a text input field and an image submit input. Initially, these elements were arranged inline without any formatting issues. However, a recent change has caused the text input to appear on the left of the image input. This alignment is still ...
Is there a way to write CSS that produces different effects on Mac OS compared to other operating systems? For example: .(mac){ height: 100%; width: 100%; overflow: hidden; } .(win and linux){ height: 100%; width: 100%; ...
There are three buttons arranged in a row, and when one is hovered over, dropdown content appears underneath all three buttons. However, the content disappears when the mouse moves down to it. Unfortunately, images cannot be posted inside yet** https://i.s ...
I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...
We are currently in the process of developing a sophisticated single-page application that allows users to create animations on various widgets. For example, a widget button can be animated from left to right with changes in opacity over a set duration. Ad ...
I have a collapsed table with a link that collapses its content. My goal is to change the link (such as from "+" to "-" and vice versa) using JavaScript. I was able to achieve this, but now my table no longer collapses. Here is the code snippet: <div c ...
JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...