For a chat application, I want to have a scroll-able message list. It works in Chrome / Chromium, but not in Firefox. The problem seems related to flexbug #1 and has been asked & addressed often enough here on SO. However, despite trying min-height:0 on all parents as suggested here and elsewhere, the problem remains.
One quick fix is to remove display:flex from .bot-message-list. But doing so results in messages starting to appear on top of the list, instead of at the bottom as is intended.
So the question is: what can I change in order to make the message list scroll-able on all browsers while having the initial messages starting to populate at the bottom of the list.
Codepen of the current state
Any pointers are very much appreciated!
You can try add height on element ".message-list-inner".
.message-list-inner {
height: 100vh; /* or height: 100%;*/
}
For a brief look it seems to work.
Related
I have a website that is exhibiting bizarre behavior that I don’t understand. I’m unable to tell if I’ve run into a bug or what I might be doing wrong.
The page has two elements, nav and main that each have overflow-y: scroll set. This is so they can be scrolled independently of one another. If I scroll the main element, and then hover over the pagination buttons at the bottom, the main element will jump back to the top (lose its scroll position). It also happens if I hover over the Octocat/GitHub symbol in the navigation on the right.
The common thread here is that the pagination buttons and the GitHub symbol on the right both have svg elements. If I get rid of the svg element the bug doesn’t happen. Also if I remove overflow-y: scroll from the main element the bug does not occur.
I’ve also noticed that the issue might be somehow related to having height: 100% set on the <html> tag. When it’s removed the issue no longer occurs, but unfortunately it can’t be removed otherwise the full width/height layout doesn’t work correctly.
Can anyone tell me why this is happening, if it’s a bug in Safari, and/or how to fix it? Thanks!
You can fix this by adding the following to body where your grid rules are defined. Sadly, I have no idea why this solves the issue.
body {
…
grid-auto-rows: 1fr;
}
After spending hours and hours on this, the only way I could figure out how to fix it was to switch from CSS grid to flexbox. 🤷🏼♂️
This is the diff that fixed it, if you’re curious.
This is a bug related to safari version 12.1, which is fixed in Safari Technological Preview.
https://bugs.webkit.org/show_bug.cgi?id=197189
However as a workaround in the mean time.
Can you try
overflow-x:hidden, overflow-y: scroll,
height between 50 to 95vh for the specific container depending on your surrounding elements. This is going to have minimal safari jump on hover and probably empty space at the bottom.
Even after Safari bug is fixed, seems that the bug still occurs on some other scenario. I successfully reproduced a similar behavior on Fluent UI dropdown: https://github.com/microsoft/fluentui/issues/23668
The workaround in my case was to change dropdown item height from "auto" to "100%".
I'm seeing a weird issue and have spent a good bit of time trying to track it down, both through SO/blogs and finding an active issue in Chrome's bug tracker.
Link: https://jsfiddle.net/Lftwqh8p/1/
Issue: This only occurs in Chrome. In JS, I have a commented out line to switch between using the mixins. Both have their own issues with the same root problem.
Problem image:
So what we see is the width of the scrollbar
::-webkit-scrollbar {
width: 25px;
height: 10px;
}
directly effects how off-div the first column is. If we view this in IE or Firefox, we see this works as expected (Takes full width, or the column header is in the correct position).
If we remove the CSS for will-change: transform or the position: sticky, this will resolve the problem.
So I have a suspicion that this is a browser issue, and specifically is an issue with how Chrome renders these on Stacking Context or Compositing Layer. These both occur when position sticky is used and when will-change is set to transform.
I can't find any info on an issue like this because our use-case seems to be a bit specific to us, but is necessary (performance).
Any ideas on what the issue could be?
I have a problem with this site ...
http://reliancetrustgroup.com/
If you refresh the page several times you'll see that once a page appears with scroll appears once without scrolling
From what can cause this problem?
.page-id-5 #content{
height:auto !important;
}
I tried adding this code to solve, but unfortunately does not work ... So it is.
Can you help me solve this problem?
There is a scrollbar every time in the latest Chrome on OSX for me.
You can avoid this by adding height: 100vh; to your main page container. However, do know that vh isn't quite supported in every browser yet.
Also, if you do this, you'll want to space all of your elements based on percentages or vh units so that if a monitor is shorter, all of the elements fit. You'll also want to remove the overflow: hidden; because that may cause information to be hidden.
The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.
I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.
These two images show the error and what its supposed to look like:
http://tinyurl.com/layout-error
http://tinyurl.com/layout-fixed
The page referred to is here: http://tinyurl.com/yb9h34d
Edit: Clear: both; doesnt seem to do anything to solve the problem.
Yes... it looks like a float-caused problem.
Try adding this line into your HTML, just before the footer:
<div style="clear: both;"></div>
I think it is expecting an item that clears the floats.
Try floating the div.container or remove it, as it is useless and a mild case of divitis.
In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:
clear: both;
This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.
Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp
What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.
I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).
Why does DIV#footer have display:none on it?
Anyway, if you float: left on .footerWithRightAndLeft you should be ok.
You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.
I have been working on a site for a client and I am about to wrap it up.. but unfortunately IE6 is being a pain in the buttocks.
My main problems are on this page:
http://seaport.bythepixel.com/#storage
The list items dont have bullets
The spacing below the floated items are not being cleared correctly. I applied "clear:both" to my h2 tags and it is clearing.. but the spacing bellow the floated items doesnt seem right. If you compare any other browse with IE6 you will see the spacing issue I am speaking of.
maybe this is just an IEtester problem, but the background image I have applied to "#full" stops and starts randomly. You can see this on the storage page and the floor plans page. I am referring to the gray to white gradient that separates the left navigation column with the right content column.
Any help as always is greatly appreciated!
1) and 3) are clearly the hasLayout bugs. You need to give the elements in question a "layout". Start with giving the #full a position: relative; (validates) or a zoom: 1; (doesn't validate).
2) is likely caused by odd use of overflow: hidden; here and there. Try removing it all and see if that helps.
When you set an overflow (hidden if possible) to all floated elements there might already be a lot of problems solved.
maybe this is just an IEtester
problem, but the background image I
have applied to "#full" stops and
starts randomly.
I can confirm i see this on a machine with IE6 only installed.