I'm finishing up work on http://www.mimicmuziek.nl. I used the bootstrap .sticky-top class on the navbar, however when I use Chrome there appears to be a tiny 1px gap above the navbar, that I can see the content through. Doesn't happen when using Safari. Any ideas on how to fix this would be appreciated!
Edit: I just tried it on my girlfriend's computer and it works fine there
UPDATE:
I found this: https://bugs.chromium.org/p/chromium/issues/detail?id=810352&q=sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
Not only Bootstrap.
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>
It can be reproduced when the sticky-ed element is below other divs.
When I delete the h1 element, it performs well.
But you know, sometimes an element has to be there. I put a sticky-ed element below an img tag, the 1px gap appears. When I set the img a certain height, it works.
I think there is something wrong with Chrome-like browsers. Due to it performs perfectly on wkwebview on iOS and Safari on iOS/macOS. And 1px gap on Android webview which supports blink.
I noticed that it only happens when the navbar is sticky and the Bootstrap Carousel is sliding underneath the navbar. Hope this will help people debugging this issues.
Related
I am developing an application with a few components that are scrollable horizontally. I've come across some unwanted behaviour where the horizontal scrollbar does not disappear leaving an ugly long white scrollbar.
My 'show scroll bars' setting on MacOS is set to 'Automatically based on mouse or trackpad'. My chrome is Version 72.0.3626.121 (Official Build) (64-bit).
The issue can be reproduced in the snippet below.
#horizontal {
width: 100%;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row;
border: 2px solid purple;
display: flex;
}
#vertical {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
flex-direction: column;
border: 2px solid purple;
display: flex;
}
.horizontal-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: pink;
display: flex;
}
.vertical-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: red;
display: flex;
}
<div id="horizontal">
<div class="horizontal-item">1</div>
<div class="horizontal-item">2</div>
<div class="horizontal-item">3</div>
<div class="horizontal-item">4</div>
<div class="horizontal-item">5</div>
<div class="horizontal-item">6</div>
<div class="horizontal-item">7</div>
<div class="horizontal-item">8</div>
<div class="horizontal-item">9</div>
<div class="horizontal-item">10</div>
<div class="horizontal-item">11</div>
<div class="horizontal-item">12</div>
<div class="horizontal-item">13</div>
<div class="horizontal-item">14</div>
<div class="horizontal-item">15</div>
<div class="horizontal-item">16</div>
<div class="horizontal-item">17</div>
<div class="horizontal-item">18</div>
<div class="horizontal-item">19</div>
<div class="horizontal-item">20</div>
</div>
<div id="vertical">
<div class="vertical-item">1</div>
<div class="vertical-item">2</div>
<div class="vertical-item">3</div>
<div class="vertical-item">4</div>
<div class="vertical-item">5</div>
<div class="vertical-item">6</div>
<div class="vertical-item">7</div>
<div class="vertical-item">8</div>
<div class="vertical-item">9</div>
<div class="vertical-item">10</div>
<div class="vertical-item">11</div>
<div class="vertical-item">12</div>
<div class="vertical-item">13</div>
<div class="vertical-item">14</div>
<div class="vertical-item">15</div>
<div class="vertical-item">16</div>
<div class="vertical-item">17</div>
<div class="vertical-item">18</div>
<div class="vertical-item">19</div>
<div class="vertical-item">20</div>
</div>
The problem occurs when you hover over the bottom of the horizontal scrollable area (so where the scrollbar will appear, the purple bottom of the container with pink squares). The scrollbar will appear and never leave again. The same does not happen with the vertical scrollable area, where the scrollbar also appears but does disappear. If you scroll the scrollbar before hovering over the bottom then afterwards said problem won't occur if you hover over where the scrollbar would appear.
In the image below I hovered over the bottom of the horizontal scrollable area and it shows the scrollbar is there (and it does not leave afterwards!).
This problem infact also occurs when I hover over the horizontal scrollbar from a stackoverflow code block, making text hardly readable.
Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text
It will look like this and the scrollbar wont disappear anymore much like in my own case:
I'm assuming this is a bug in Chrome with MacOS but I was hoping there may be some CSS tricks I can do to solve this problem.
This is Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36
Many people are adding white space of scrollbar size (25px) to prevent scrollbar from obscuring content.
It is workaround and can be considered only as a temporary solution though.
From the ticket, they give a workaround until the issue is fixed:
Go into your System Preferences > General
Select Always:
We have been having this issue in our Macs with same OS version, same chrome versions. The final conclusions we got are the following:
the ones using the Apple Original mouse and trackpad are able to see all normal.
When we connect to the same computer one standard USB mouse, after reload the web we suddenly got the annoying scrollbars.
It was tested and same happened in 3 different MacBook Pro.
I upload a video here what happens when I plug out and in: https://youtu.be/AGTF2Ltuxnk
EDIT
Our custom solution was prevent default scroll bars and set up our own scroll bars that will only be displayed when neededneeded.
::-webkit-scrollbar-track {
display: none;
border-color: transparent;
background-color:transparent;
}
::-webkit-scrollbar * {
background:transparent;
}
::-webkit-scrollbar {
width:rem(7);
min-width:rem(7);
height:rem(7);
min-height:rem(7);
}
::-webkit-scrollbar-corner {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
border-radius:rem(10);
background-color:#666;
-webkit-box-shadow: inset 0 0 0 ;
}
I'm having a problem with a fixed border around a responsively sized div. This issue only happens in Chrome.
I'm having a hard time reproducing it in JSFiddle, but I'm essentially trying to center a div within another (which is placed somewhere on my page) and the centered-div has a nice 1px border around it. The LESS for these two elements are as follows:
.popup {
display: inline-block;
height: 93%; width: 30%;
margin-right: 7%;
margin-left: -3%;
position: relative;
.text {
box-sizing: border-box;
width: 100%; height: 50%;
border: 1px solid black;
padding: 0 5%;
position: absolute;
top: 50%; left: 50%;
.translate(-50%, -50%); # Some LESS that is just a translate call
color: black;
font-size: 18px;
}
}
This is what I see, which changes as the screen size changes (sometimes correct, sometimes different borders are missing/incorrect):
EDIT: Added relevant HTML.
<div class="container">
...Other stuff...
<div class="content">
...Other stuff...
<div class="breakdown">
<div class="block">C++ (Circle dials you see)</div>
<div class="popup">
<div class="text">Some text here to go in the popup</div>
</div>
<div class="block">Java (Next dial)</div>
<div class="popup">
<div class="text">Some text here to go in the popup for the Java dial</div>
</div>
</div>
</div>
</div>
There's more stuff in container, and more stuff in content in the DOM levels shown. However, the other items in container are each in their own block on the page (no overlap), and so is the items in content. A breakdown div holds the dials and popups that you can see in the screenshots. The idea is that when i hover over a "block" or a dial the popup shows up to the right, shoving the next dial over when shown.
I've observed such issues with borders when I have zoomed the page - that would explain why you see it only in Chrome and only on one domain (you said you cannot reproduce it in JSFiddle).
Click Ctrl+0 or check if you have an icon in the addressbar of a magnifying glass (it's displayed when the zoom level is different from 100%).
I have a fixed position div that sits at the bottom of the screen as I scroll, not moving. However, on Safari, this div acts like it is absolutely positioned, and moves up and down with the rest of the content. When I click "Inspect Element", the programmed (desired) location is highlighted, not the visual (actual?) location.
I am unable to recreate this issue in a fiddle. This is not happening in Chrome, FF, or IE (10+).
Here's a screenshot of the difference between the visual (the character count box) and the programmed location (the highlighted area).
There are more actual layers of css and html on top of these, but here's the immediate code:
html simplified
<article class="parent">
<article class="inner-wrapper">
<div id="counter">
Character Count: <span class="tally">*javascript calculation*</span>
</div>
</article>
</article>
scss
article.parent {
max-width: rem(640);
margin: 0 auto rem(30) auto;
padding: 0 rem(10);
#counter {
position: fixed;
border: #888 solid 1px;
bottom: 130px;
left: 10px;
border-radius: 5px;
padding: 10px;
background: rgba(255, 255, 255, .8);
font-size: .8em;
min-width: 150px;
}
}
How can I make this div behave in Safari, so that the visual sits on top of the programmed location?
BUG FOUND:
I was able to trace the bug to a hardware-acceleration "trick" we were using by including these two rules in a parent element:
transform: translateZ(0)
perspective: 1000
By removing these two rules, the element now behaves as expected. More good information about this issue here: CSS performance relative to translateZ(0)
Bonus Bug Fix: Removing these rules in the HTML body caused various element-overlap problems in our PhantomJS/Poltergeist tests. Apparently PhantomJS doesn't move elements properly on its own. We included these rules only for the tests and currently everything is running fine.
ORIGINAL SOLUTION:
I was able to fix this problem by pulling the counter from the parent container:
<article class="parent">
<article class="inner-wrapper">
...
</article>
<div id="counter">
Character Count: <span class="tally">*javascript calculation*</span>
</div>
</article>
Try this fiddle
http://jsfiddle.net/sosypjLg/1/
#counter {
position: fixed;
bottom: 0;
width: 100%;
}
you need this css style
I have two questions, hope its not a problem putting them in one post.
Question1
I have a border I want to stretch across the full screen but cant get it to work. I have tried width: 150%, which is okay for the right side, but leaves the left as before. I then added margin:- 100% but that naturally caused issues with items with the div. My code is below. Also im guessing the code I tried would be considered a hack? I am trying not to get into that habit.
#border{
border-top: thick double #000;
border-bottom: thick double #000;
padding: 1% 0 1% 0;
margin-top: 3%;
margin-bottom: 3%;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
#content{
margin-top: -3%;
}
<div id="wrapper">
<div id="content">
<div id="border">
<!--some small images-->
</div>
</div>
</div>
Question2 I am trying to add a jagged edge with a shadow to the top of a div, I have created the image of the jagged edge and tried using the css3 shadow effect but with no success can someone please advise?
Your #border is inside your #wrapper with max-width:1200px so it's normal it will stop at the 1200-mark. Change the HTML to
<div id="border">
<div id="wrapper">
<div id="content">
<!--some small images-->
</div>
</div>
</div>
and work from there.
Search Google for CSS3 box-shadow for your second problem, lots of examples there!
I'm trying to make a layout where I have a Div that gets added its content in a dynamic way. I want this "parent" div to have a fixed height and when content its added the div grows horizontally as needed.
This is the test HTML I made to isolate the problem.
<html>
<head>
<link rel="stylesheet" href="styletest.css" />
</head>
<body>
<div style="width:700px;overflow:auto">
<div class="anio">
<div class = "semestre">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
</div>
</div>
</body>
</html>
Here i have 7 class=floater divs that go into the class=semestre container div which is supposed to grow horizontally as I add more class=floater divs. all of this goes into a fixed width div with overflow-x:auto.
after some fighting with the css i managed the following:
div.floater {
margin: 4px;
width: 110px;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{
white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
margin-top: 5px;
margin: 2px;
height: 90px;
border: 1px solid #ccc;
min-width:98%;
}
div.anio{
margin : 2px;
border: 1px solid #ccc;
min-width:98%;
}
So this worked..kind of.. the class=floater divs go horizontal and cause the activation of the overflow-x on the outermost div, but the container divs that contain the class=floater div don't grow as i think the should (this can be seen by the borders not growing). After googling I found some proposed solutions like adding width:auto on top of the min-width: css property or floating them, but none worked. This is a minor issue since the borders are just for formatting.
The mayor problem I'm having is when I try to add content to the class=floater divs they just go CRAZY and won't stay where they should( when they had no content). i tried reverting the white-space:nowrap by adding white-space:normal to the floater class but that didn't work. After that I just went berserk and started trying random stuff and managed to fix my first problem but the I forgot what I did and went back to step 1 D:.
To be honest I'm very new to html/css and I'm learning by doing. So if this question has been already asked/answered believe me that I searched for it. Also excuse my English, doing my best.
Thank you for your time.
edit:
By request, the fiddle :D http://jsfiddle.net/UBYKy/1/
there you can see both of my problems.
edit 2: i believe i have found a solution to both problems. For the first one I solved it by adding display: inline-block to the parent divs and for the 2nd problem I added vertical-lign:top to the floater class css(as afshin suggested) and it works just fine. I hope this helps anyone having the same problem.
I think you should use this
div.floater {
vertical-align:top;
margin: 4px;
min-width:110px;
width: auto;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
DEMO