Actually i have a progress bar that use text-indent to put some text in the middle of progress.
all work fine in Chrome and IE, but isn't in Firefox. (yeap, i can't believe it)
Check the difference in Chrome and Firefox.
http://jsfiddle.net/ZGyaz/1/
animated version
http://jsfiddle.net/ZGyaz/19/
HTML
<div class="container">
<div class="bars bar1">sametext</div>
<div class="bars bar2">sametext</div>
</div>
CSS
.container{
border:1px solid #09c;
height: 20px;
width: 100%;
position: relative;
}
.container .bars{
text-indent: 45%;
position: absolute;
top:0;
font-family: arial;
color: #09c;
}
.container .bar2{
background-color: #09c;
width: 50%;
color: #fff;
overflow: hidden;
}
Width in bar2 and text-indent are dynamic vars to show the expected result on fill the progress bar.
This looks like a previously unreported Gecko bug. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=908706
As a workaround, are you able to use a text-indent value that's not a percentage?
Related
I have a div with rounded corners in Chrome with overflow set as hidden.
It works as expected: the child content is cut off at the corners.
However, when a filter is applied (in my case, drop shadow), the child content is no longer cut off and has square corners. This happens too with other filters, like blur.
Sample Code:
HTML:
<div class="card">
<div class="full">
This div should have rounded corners too.
</div>
</div>
CSS:
.card{
overflow: hidden;
border-radius: 10px;
/* Removes hidden corners in Chrome */
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
background: gray;
width: 200px;
height: 200px;
}
.full{
background: black;
color: white;
width: 100%;
height: 100%;
}
JS Fiddle: https://jsfiddle.net/uc1v5nzk/
Firefox renders the element properly when filters are applied.
Is there any elegant fix to this on Chrome, especially when there might be many child elements that may or may not be in the corner?
Chrome Version: Version 66.0.3359.117 (Official Build) (64-bit)
OS: Ubuntu 16.04 64 bit
Adding an absolutely-positioned ::before element on wrapper seems to fix the bug.
.card::before{
content: '';
position: absolute;
}
Fiddle: https://jsfiddle.net/swordys/uc1v5nzk/2/
This is strange behavior and seems a bug in chrome.
You can use a pseudo element to create a layer and apply filter on it:
.card{
/* Critical CSS */
overflow: hidden;
border-radius: 10px;
background: gray;
position: relative;
width: 200px;
height: 200px;
}
.card::before {
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
position: absoulte;
content: '';
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.full{
background: black;
color: white;
width: 100%;
height: 100%;
}
<div class="card">
<div class="full">
This div should have rounded corners too.
</div>
</div>
If all you want is to add box shadow, you can replace the filter: drop-shadow attribute with box-shadow like so:
/* filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); */
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
In general, for shadow, I rather use box-shadow attribute due to a wide browser support.
I'm attempting to build a progress bar, fairly simple. I have a bar nested inside a tray. The tray has overflow: hidden and border-radius set on it.
Here's the jsFiddle demonstrating the problem.
As you can see in the image, there is a jagged artifact on the left side of the progress bar. It appears the anti-aliased edge of the parent progress bar (dark background) is bleeding out. The desired behavior is that the bar/fill element is used for anti-aliasing the progress bar.
A brief solution I tried was absolutely positioning the inner div, but the progress bar needs to be able to animate from 0 to 1%, and that looks off without the overflow: hidden clipping.
I see this artifact both Chrome and Firefox so I don't immediately suspect it's a bug in Webkit.
I would also note this bug also affects Bootstrap's progress bars, but when the tray is a light color and the background is a light color, the artifact is much harder to spot.
Adding an extra wrapper helps mitigate your issues with 0 & 1%:
http://jsfiddle.net/p197qfcj/11/
HTML
<div class="outer-tray">
<div class="tray">
<div class="fill"></div>
</div>
</div>
CSS
body {
background: #ccc;
}
.tray {
/* overflow: hidden; */
height: 20px;
background: #000;
border-radius: 50px;
height: 30px;
width: 100%;
border: none solid transparent;
background-color: black;
}
.fill {
background: #fff;
width: 10%;
border-radius: 100px;
left: -1px;
position: relative;
float: left;
box-sizing: border-box;
border: 1px solid white;
top: -1px;
height: 32px;
}
.outer-tray {
overflow: hidden;
border-radius: 100px;
overflow: hidden;
display: block;
}
EDIT:
The only way I can think of is if you removed the overflow and applied a lower border-radius around the gray-progress which will slightly overlap the black.
http://jsfiddle.net/p197qfcj/7/
.tray {
height: 20px;
background: #000;
border-radius: 100px;
height:30px;
width:90%;
}
.fill {
background:#eee;
width:10%;
height:100%;
border-radius: 12px; /* still occurs without this! */
}
I've been looking at this question and I'm having trouble getting my progress bar to work exactly the way it should.
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="upload_status"></div>
</div>
<div id="bar_color2">
<div class="upload_status"></div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
}
#bar_color1 {
background-color: #FFFFFF;
color: #000000;
width: 100%;
}
#bar_color2 {
background-color: #000000;
color: #FFFFFF;
width: 0px;
}
#bar_color1, #bar_color2 {
height: 20px;
position: absolute;
top: 0;
left: 0;
}
As I dynamically increase the percent of #bar_color2 and update .upload_status, I end up with something like this:
Whereas I want the text to remain centered one on top of the other, so when the progress reaches half way the text appears to change color... I've tried various things, swapping divs around, adding another parent, but I just can't seem to figure it out. Any ideas?
I know that this doesn't really help your question, but using the native HTML <progress> element will save you a lot of headaches when interacting with it using JavaScript if you're targeting relatively modern browsers.
edit: The stuff I posted earlier doesn't work, but this does:
http://jsfiddle.net/mYEM3/8/
Just copy from there.
You can just change the color of the text that is on the progresive loading bar(not the middle one/the white one) to black and the annoying percentage should dissapear.
And about when the progress reaches half way the text is supposed to change color problem, i think you can do this as well with the change color thing.
Here's a rough idea that will work:
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="progress_text1">50%</div>
</div>
<div id="bar_color2">
<div class="progress_text2">50%</div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
overflow:hidden;
}
#bar_color2 {
background-color: #FFFFFF;
color: #000000;
width: 50%;
}
#bar_color1 {
background-color: #000000;
color: #FFFFFF;
width: 50%;
}
#bar_color1, #bar_color2 {
height: 20px;
position: relative;
float:left;
overflow:hidden;
}
.progress_text1{
position: absolute;
left:100px;
width:100px;
text-align:center;
}
.progress_text2{
position: absolute;
right:100px;
width:100px;
text-align:center;
}
I Think its only possible with javascript.
Its not complete, and only a little example with changing the "color" after 50%, but the trick is to using special "layers" for that: http://jsfiddle.net/J92Bv/
<div id="progress_bar">
<div class="progress_left" style="width: 50%;"></div>
<div class="progress_right" style="width: 50%;"></div>
<div class="text_1">50%</div>
<div class="text_2">50%</div>
</div>
You must change the z-index if the "white" text overlaps with the first progress-bar layer. In combination and a little more time you can create an progressbar, there change the color correctly when the bar appears to the text. I think here you must use a little helper layer there is positioned after 50%.
I have the following CSS:
.views-imagematrix-block .views-field-title .field-content > a .promotedstar {
position: relative;
top: -6px;
}
.promotedstar {
background: url("../img/icons/Star.png") no-repeat scroll 0 0 transparent;
font-weight: bold;
height: 25px;
padding-bottom: 10px;
padding-right: 25px;
position: relative;
top: 0;
width: 25px;
}
And the following html:
<div class="views-field views-field-title">
<span class="field-content"><span class="promotedstar"></span> Gershwins Coffee House</span>
</div>
This gives the full desired effect in Firefox, however in Chrome... It shows the span as being outside of the div (to the left), and doesn't show even with overflow: visible; set to the containing divs. (the span doesn't take the padding it seems). I don't know how to remedy this...
It looks like a Chrome bug.
I think it relates to the fact that the SPAN is empty, I found in chrome issue tracker some related bugs
I am working on some buttons. I want to have a rollover state and I have this in an image in a div with overflow:hidden to hide the state that's not active. It works sometimes but sometimes it looks like this:
The weirdest part is that when I try to use the Chrome Web Inspector it fixes itself! And nothing looks weird in the HTML/CSS.
I'm super confused as to why it isn't consistently either broken or working.
Here's the HTML:
<div class="hunting_card_button">
<div class="hunting_card_icon" id="gift_to_friend">
<img src="/images/icons/friend2.png?1" />
</div>
Friend
</div>
And the relevant CSS:
.hunting_card_button {
width: 65px;
overflow: hidden;
display: inline-block;
text-align: center;
margin: 0 2px 0 2px;
}
.hunting_card_icon {
position: relative;
right: 0;
}
.hunting_card_icon:hover {
right: 65px;
cursor: pointer;
}
The solution was to change one of its containers to a div from a span.