I have noticed a tiny rendering issue across borwsers, and i was wondering if anyone knew how to fix it.
This does not happen when the browser is full screen or maximized but rather only when the browser is resized to a smaller window. I have noticed it on Chrome,Firefox and opera for now.
image of rendering issue
So what I have here is a nested DIV.
Here is my Scss code so you can see what I am describing:
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 600px;
height: 400px;
border: 1px solid black;
margin: auto;
padding: 0;
overflow: hidden;
.child{
width: 100%;
height: 50px;
background: #000;
}
}
You will see in the image there is a small white space between the parent div and child div.
the white space is circled in red.
So does anyone know what causes this minor issue?
This may be caused by a whitespace in your html between the parent and child. You could test this by removing all whitespace and seeing it if fixes the problem, so instead of this:
<div>
<h1>Title here</h1>
</div>
you could try:
<div><h1>Title here</h1></div>
If this doesn't work, a quick fix might also be to add a 1px negative margin on the child ( margin-left: -1px)
Related
In the snippet below, padding-right for .ctr is not visible when content starts to overflow at small viewports.
I've read other answers and I know how to fix it.
I just need to move padding:20px from .ctr to .row. Or just add margin-right:20px to last child.
But, I couldn't find the reason as to why this happens. Could someone please explain, what's going on? any resource for further learning will be highly appreciated 🙏
Thanks!
.ctr {
display: flex;
overflow-x: auto;
padding: 20px;
}
.row {
margin: 0 auto;
display: flex;
}
.child {
margin-right: 20px;
width: 600px;
height: 100px;
background: red;
}
.child:last-child {
margin-right: 0;
}
<div class="ctr">
<div class="row">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
The padding is actually there when the content overflow it hides it.
we can illustrate this using background and background-origin
.container {
display: flex;
overflow-x: auto;
padding: 20px;
width: 200px;
background: linear-gradient(red, red) no-repeat;
background-origin: content-box;
border: 1px solid;
}
.overflow {
background: pink;
min-width: 400px;
height: 100px;
border: 1px solid;
}
<div class="container">
<div class="overflow"></div>
</div>
the white space you see on the edges is the padding
background-origin: content-box; makes the background exclude border and padding which will show us that the padding isn't clipped only covered, this happens because padding is part of the parent and the content overflow the parent so it covers it.
There's nothing special about this.
Dude the reason is the rendering or calculation in browsers (or the logic or system that we have developed starts from the top/left and ends at right/bottom). So, padding the hierarchy of placement is:
margin > border > padding > content
(And, remember it starts with top/left).
Now the issue you are seeing is only because you have not increased the height of item. If you do so - You will not only find issue on the right-padding but also on the bottom-padding.
Padding is only an effort to wrap something which is flexible. When you give a 600 * 5 width to items then they take more width than available.
padding is not as strong contender like margin. Because, margin you apply on same element - whose width or height you are manipulating. padding is being applied on an element which is trying to impose restrictions on some other element (usually direct child). So, this is the difference between padding and margin and how they get applied on browsers via Box-Model.
Hope, this clarifies a bit.
Running into an odd issue in Safari/iOS. I have the following code.
HTML:
<div class="content">
<p>Hello World</p>
<div class="footer">
<p>This is the footer</p>
</div>
</div>
CSS:
.content {
border: 1px solid orange;
overflow-x: hidden;
position: relative;
z-index: 0;
}
.footer {
background: pink;
width: 100%;
position: fixed;
bottom: 0;
}
Working example:
http://run.plnkr.co/ZgGFJgMf0atvbiyC/
The scenario:
I have a footer div positioned to the bottom of the viewport with position: fixed. This is child element of a wrapper div for the entire page content.
The problem:
The above works just fine in Chrome. In Safari (and iOS), however, notice that the footer can't be seen. It's there...but the parent div isn't as tall as the viewport, so the footer can't be seen.
Removing any one of the following from the .content div fixes things: overflow-x, position, z-index.
Why?
For this example, the easy fix, of course, is to simply remove of of those attributes, but the issue is that I'm debugging an existing site with about a 1000 lines of HTML and 30k+ lines of CSS. Yes, a bit of a mess. But it's what I have. I'm a bit hesitant to just remove one of those styles without first understanding the issue fully.
I have encountered what I consider a bug in Safari and was wondering if anyone might be able to shed some light on why this outcome is taking place. I have included a very simple example below, but basically my issue is this. I have a child element with a width of 300px and a height of 80px, I have a this child nested in a parent with a width of 0px and an overflow that is hidden. These two elements are wrapped in a container that has no width set and all three elements are floated left. The content is being hidden by the parent, however the container that is wrapping them both is extending the full width of the "hidden" child. Works great in every browser except Safari and I don't know why.
summary: width: 0px; and overflow: hidden; does not work in safari
<html>
<head>
<title></title>
<style type="text/css">
#container {background: rgba(0,0,255,1); float: left;}
#block {width: 0px; background: rgba(255,0,0,0.50); float: left; overflow: hidden;}
#content {width: 300px; height: 80px; background: rgba(0,255,0,0.50);}
</style>
</head>
<body>
<div id="container">
<div id="block">
<div id="content"></div>
</div>
</div>
</body>
</html>
Certain display values seem to be where the bug happens in Safari.
After a lot of trial and error it seems that a good solution may be setting max-width to the same as width. Keep in mind that if you animate width you need to set max-width to something that allows width to expand (possibly a value of auto), temporarily, while the animation occurs.
Read the various CSS comments below to understand more about this problem.
HTML:
<div id="container">
<div id="block">
sfdklhgfdlkbgjhdlkjdhbgflkjbhgflkdfgid
</div>
</div>
CSS:
#container {
flex: 0 0 auto;
background: red;
/* BUG: Certain display values seem to be where the bug happens, if display was just inline here, there would be no issue. */
display: inline-flex;
overflow: hidden;
border: dotted 2px green;
}
#block {
width: 0;
/* height: 0; Setting height to 0 simply creates the illusion that width is fixed. If you look at the border, the width is still there, so height 0 does not help. */
background: blue;
/* BUG: Certain display values seem to be where the bug happens, if you don't need this, change it. */
display: inline-flex;
overflow: hidden;
/* Has no practical effect here. */
text-overflow: clip;
/* font-size: 0; still keeps a little bit of width and can spoil the look of animating the width open from 0. */
/* margin-right: -100vw; is a nasty hack that totally works but is bad for animating margins. */
/* BEST FIX: Setting this property to the same as width may be the best way to fix the issue. */
max-width: 0;
}
Running example at: https://jsfiddle.net/resistdesign/k0b5s4p7
If you are presentnig text inside that div. Then, you should try to zero font-size.
.class{
font-size:0;
}
Or use text-indent
.class{
text-indent: -999px
}
If you also set height: 0; on #block your problem will be solved. Not sure why this is happening though :/
I have some pretty basic HTML/CSS that isn't working as I expect. Basically I have my body setup to be 400px wide. I then have two divs inside of the body with explicit widths of 300px and 100px. Additionally, both of these divs are set to display: inline-block. For some reason, the 100px div breaks out of the body's content area and appears below it. I don't know why this is happening. If I set the width from 100px to 96px, it works. However, if I set it to 97px, 98px, 99px, or back to 100px, it doesn't work. I find this behavior very odd. Can someone explain what is going wrong?
Note that I am testing this on Chrome (Beta Channel). Code is below.
The CSS:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
}
.list-container {
display: inline-block;
width: 300px;
height: 100%;
background-color: red;
}
.button-container {
display: inline-block;
width: 100px;
height: 100%;
background-color: blue;
}
The HTML:
<body>
<div class="list-container">
</div>
<div class="button-container">
</div>
</body>
It's because of the way white-space collapses in html.
If you remove the line-breaks from between the two div elements, everything's fine:
<div class="list-container">
</div><div class="button-container">
</div>
JS Fiddle demo.
You could, also, just comment-out the between divs:
<div class="list-container">
</div><!--
--><div class="button-container">
</div>
JS Fiddle demo.
Or even set the font-size to zero for the body element (but you'll have to redefine it for the child elements, obviously:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
padding: 0;
font-size: 0;
}
JS Fiddle demo.
Another possibility with odd inline-block behaviour in Chrome is if you have text-render: optimizeLegibility set. I was struggling with inexplicable line-breaks in inline block elements in Chrome, and found that removing text-render: optimizeLegibility fixed the problem.
I've had at least one other hard-to-figure-out problem (inexplicable non-rendering of web fonts) that turned out to be caused by optimizeLegibility in the past, so from now on that's going to be a prime suspect when things behave strangely in Chrome.
(nb. Even if you don't think you're using it, if you're using a framework like Twitter Bootstrap you may be using it unwittingly)
It's the margin in your body:
margin: 4px;
Because the margin counts as part of the total width. 300px for the first one + 100px for the second div + 8px (4 on either side) for the margin = 408px. That forces the second div down to the next line.
I'm actually kind of surprised that it works at 96. It acts like it's only accounting for the margin on one side. I'd expect it to only work at 92 or below. Either way account for the margin size in the width of your body or set the margin to 0 and that should fix the problem.
I'm trying to workaround what looks like a bug in Opera.
The undesired behaviour
is that opera puts an unnecessary vertical scrollbar on the browser window.
This happens when I have an outer div which is position:relative and has overflow-y:auto and an nested inner div which is position:absolute and happens to be taller than the height of the browser window.
for example:
<style type="text/css">
#outer {
position: relative;
overflow-y: auto;
width: 200px;
height: 200px;
}
#inner {
position: absolute;
height: 2000px;
width: 50%;
border: 2px dashed blue;
background: deeppink;
}
</style>
<div id="outer">
<div id="inner">Inner</div>
</div>
Here is a demo:
http://www.jaysweeney.com.au/overflow_issue.html
Interestingly, as you can see from the above demo, this problem does not occur
for horizontal overflow.
Here is a screenshot of what I'm seeing in Opera:
http://www.jaysweeney.com.au/screen.png
I'm using Opera 11.01 on OS X.
If anyone knows a workaround for this issue, please let me know. At the moment I'm stumped
and its too much work to change my markup and javascript to not use absolute positioning.
Thanks in advance,
Jay.
It seems indeed like this is a bug of sorts.
Only workaround I can think of is to turn off the vertical scrollbar on the browser window completely by using body {overflow-y: hidden;}
However, it's possible that's a bit too radical a measure...