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
Related
For past hours I've been struggling with the following problem:
I have two div elements wrapped inside a contaier, which itself is wrapped inside multiple other divs.
The container div has display:flex.
I have created a minimal code example hosted on codepen containing the same code listed in here
<div class="samples">
<div class="sample">
<div class="flex-parent">
<div class="div1">
<div>I'm div 1</div>
</div>
<div class="div2">I'm div 2</div>
</div>
</div>
</div>
The CSS code is pretty straight forward. I want the first element the be the
size of its content and the second one to grow the remaining width
* {
box-sizing: border-box;
}
.samples {
background: #2B2B2B;
}
.samples .sample {
padding: 50px;
}
.flex-parent {
border: 1px dashed green;
display: flex;
height: 100px;
}
.flex-parent .div1 {
flex-shrink: 0;
background-color: #D3394C;
}
.flex-parent .div2 {
flex-grow: 1;
}
But the surprising problem was that the first element was not extending fully in terms of height and leaving an empty pixel space after him, as you can see in the image below (made from codepen)
BUT
Looks like the problem solves itself when you remove this part
.samples .sample {
padding: 50px;
}
from the code, thus removing the padding of the sample wrapper.
BUT2 it shouldn't have any influence on the elements inside the other container, should it?
It believe it should be related to box-sizing: border-box, but I cannot understand why the child elements behave in such a strange way, given the fact that it should correctly have 198px height and leave no empty space after it.
What is the idea behind this, could somebody please explain?
EDIT1: looks like the issue is only present in latest versions of desktop Chrome (65.0.3325.181) and Edge (41.16299.248.0)
EDIT2: on older versions of Chrome (42), it is working as intended.
The problem was in my display scaling 125%, that generated the gap. Bringing it back to 100% solved it.
There must be some issues inside chrome and edge engines (because it works well in Firefox).
For more information, follow the link https://github.com/electron/electron/issues/8332
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.
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 recently found an article that gave me code to create a lightbox effect. Here's the article: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
I realize this article was written in 2007, so maybe his explanation is no longer relevant.
Here's the problem, I have used his codes to create the lightbox effect, and tweaked them according to my needs. The only problem is, the "black overlay" section does not reach to the bottom of the browser.
In the article mentioned above, he explained that his code was supposed to create it so that the black overlay extended the entire width and height of the browser window and referenced the z-index to demonstrate this, but this is not the case for the height.
I have tried adjusting the z-index to be more than what it originally was, but nothing has worked so far. I've also tried searching for solutions, but again nothing I've tried has worked. Does anyone have any suggestions on how to get the black overlay to reach the bottom of the browser window? I tried this on a smaller screen (15") as well as mine (17") but the issue still remains. Thanks in advance for any help with this.
Here is a rough jsfiddle example and corresponding code:
<div id="container">
<div class="random-element">
<div class="fade"></div>
</div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
</div>
And CSS:
#container {
height: 1000px;
width: 100%;
background-color: #ffe;
padding-top: 50px;
}
.random-element {
margin: 50px 0 0 100px;
height: 100px;
width: 100px;
background-color: #aff;
}
.fade {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: #000;
opacity: 0.5;
z-index: 1001;
}
Change the CSS from absolute positioning to fixed positioning.
.fade {
position: fixed;
}
I have the following HTML which I'm using to create a rounded container using a left image, a right image, a gradient for the background of the container itself, and a bottom image which in practice is normally a "shadow"
I have the following html, it has inline styles defined because it is being generated from a .NET control but I can check for the browser and output different styles. This looks perfect in IE 8 and Firefox 3.5 but it looks awful in IE6.
I need to figure out how to get this looking decent in IE6.
<div style="width: 305px; height: 194px;">
<div style="float: left; display: inline; background-image: url(images/LeftSide.png);
height: 194px; width: 7px;">
</div>
<div style="float: right; display: inline; background-image: url(images/RightSide.png);
height: 194px; width: 7px;">
</div>
<div style="padding-top: 5px; background-image: url(images/gradient.png);
background-repeat: repeat-x; width: 291px; height: 194px; margin-left: 7px;">
<h1>
Some text...
</h1>
</div>
<div style="background: url('../images/small_shadow.png') no-repeat; width:305px;"> </div>
You can see an example at https://www.msu.edu/~grossm51/sample/test.html. Thanks in advance
http://www.curvycorners.net/
Maybe, this helps you. Javascript instead images. Works in IE6.
A free JavaScript library for creating gorgeous rounded corners for
HTML block elements i.e. DIVs. Supports anti-aliasing, borders and
background images.
The best solution for rounded corners in IE6 (and IE7/8) is CSS3Pie.
It's an IE-specific script that implements the CSS standard border-radius for older versions of IE.
adding the style attribute
position: absolute;
to the left side and gradient portions did the trick.
This looks like a variation on the IE 6 three-pixel problem with floats:
http://www.positioniseverything.net/explorer/threepxtest.html
To fix it, try this. To the left-floating div, add a -3px right margin:
margin: 0 -3px 0 0;
To the right-floating div, add a -3px left margin:
margin: 0 0 0 -3px;
Finally, on the content div, erase the margin and width declarations.