I have a navigation element, below some other content, that I should be fixed, as soon as the scroll height is reached. This is achieved with position:sticky and works fine in all browsers. But I also want to shrink that element as soon as it is fixed.
https://codepen.io/arichter83/pen/xMLyOJ
If scrolled slowly at Chrome (71.0.3578.98 64-bit Mac) this header flickers, because if the element is shrinking, the window.scrollY of the page is reduced, which makes the element become larger again... back and forth. (use "start" to see the behavior)
Any workaround for this?
Wrapping in fixed height: this would stop the content below to move upwards, which I want.
Adding a position property to your header.minified ID seems to have stopped the flickering.
#header.minified {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
position: fixed;
}
Related
Screen recording
In the above video the same webapp in Safari, Chrome and Firefox.
After pressing start an infinite loop generates new tile, computed array places it "temporary" in the main array at a location determined by window.scrollY, waits 1 second, then adds this tile permanently to the array. Current window.scrollY is being updated every 8ms and is displayed at the top right corner.
What I do is after start I wait for at least 5 tiles to be added and then scroll down slowly without letting go for 50-100 pixels. As you can see in the video Safari handles it well, scroll behaves as expected. Chrome suddenly jumps scroll to +200 or so, and Firefox jumps to the end of the array.
You can disregard all transition-group animations and animation of each tile, disabling them didn't change anything. ScrollTo or anything similar is never used in the code.
V-for is used like this:
<div id="tileStack">
<transition-group name="transitionStack" tag="ul">
<TileItem
v-for="tile in tileStackWithGap"
:key="tile.key
/>
</transition-group>
</div>
with tileStackWithGap being the computed array with new tile sliced in.
All related CSS rules are:
html, body, ul {
margin: 0;
padding: 0;
}
#tileStack {
width: 100vw;
padding: 40.5vh 0;
}
.tileMain {
width: 30vh;
max-width: calc(100vw - 4vh);
height: 15vh;
padding: 0px;
margin: 2vh auto;
border-radius: 3vh;
}
.tilePreview {
width: 24vh;
max-width: calc(80vw - 3.2vh);
height: 12vh;
border-radius: 2.4vh;
}
with tilePreview being applied to the "temporary" tile.
What can be causing this behaviour and is there a way to battle it?
Turns out the behaviour was caused by scroll anchoring, which in my case did exactly the opposite. Can be turned of with overflow-anchor: none
What should be a super simple one here, but its getting me to scratch my head. I have a div with an H1 and P tag that is overlaid on top of a Three.JS 360° video viewer on this website: http://gloriouslabs.com/#page-5
Right now the code for that div is:
.video_tag {
position: absolute;
z-index: 100;
top: 15%;
left: 5%;
width: 230px;}
Works fantastically on Chrome with the position tag rendering it in reference to the top of the screen. However on Firefox, the div renders itself from the top of the PAGE, not the SCREEN (on Firefox you can see the .video_tag div appear on the top of the screen at http://gloriouslabs.com/)
Any ideas why it's acting like that? The same bug happens on both absolute and fixed position.
Cheers!
I opened your page in firefox's inspect and added this position: relative;:
#holder {
height: 100%;
width: 100%;
position: relative;
}
It is working, but I didnt test back in chrome
Set your container to relative positioning
#holder {
position: relative;
}
If this is not the right container then set it on the one you need
So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.
I have tried using:
position: fixed;
and
position: absolute;
However it cuts the width of the DIV down completely.
To get a view of what I'm working with go to: http://198.50.242.77/YouBB/
I'd prefer to use strictly CSS only but if I must use JS I'll use it.
Thanks!
position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.
position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.
I opened up your web page in Chrome, and changed the styles for #navigation to:
background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;
This does what you want. You will just need to position the rest of the content to the right.
I just ran across an issue with a element (the header), fixed positioned to the top of the page, disappearing. This was found in a mobile site I was creating.
What was causing this was a click to a menu button, which would open the sidebar navigation. When I clicked this button, the sidebar would open as expected, but then the header would disappear. What would be left of it was the remnants of an image replacement technique I was using the Phark Method; the text "menu" was left behind. (I'm fairly sure that this is not important to the issue at hand, but I could be wrong.)
The header element had styling like so:
header{
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
This would only happen in Android 4.0 stock browsers (Galaxy Tabs/Galaxy Nexus were some I tested).
What would cause this to happen in just Android 4.0 browsers?
What seemed to be the issue was the fact that the header element did not have a left property value. To fix this, I just added a left:0; property to the header element, giving me the following CSS:
header{
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
After figuring this out, I recall having a similar issue on a desktop site that used fixed positioning. The fact that I didn't have a left property set caused the fixed element to not even appear when the page loaded.
Hope this fixes/sparks ideas to a fix for users in the future! I know I'll be setting both a x and y axis position property to all my fixed elements from now on ;)
I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?
I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:
#sidebar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#sidebar::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
-webkit-border-radius: 0px;
}
#sidebar::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 0px;
}
As far as having the "inner" scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don't believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html