Why is this shadow not working in Firefox? - css

To be honest, I don't know how to ask this strange behaviour on shadows because I'm using the CSS standards and, by my surprise, it's not working properly:
Take a look at this style:
.light.boxed {
/* -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(4, 4, 4, 0.06);*/
-moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(4, 4, 4, 0.06);
/* box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(4, 4, 4, 0.06);*/
}
It's supposed that Firefox Dev Edition displays the shadow taking the values from the -moz-box-shadow, but it doesn't. It displays nothing. It takes the value directly from box-shadow.
Moreover, when I uncomment box-shadow, it displays the shadow on Firefox, BUT when I scrolldown the page, it shows some irregularities in the render; I mean, at some point the shadow is darker, and at the end it's lighter again. It seems that Firefox doesn't render properly the rgba colors (only when the blur parameter is 0 and you have to scrolldown).
Is it a known bug? Do you know a solution for it?
This is the HTML:
<body class="light boxed"></body>
And more CSS:
.boxed {
margin: 0 auto;
width: 1000px;
}
Look an example here: http://jsfiddle.net/gerardbm/d7d4u5rf/
You need to open it in Firefox to see how the shadow doesn't work.

"Gecko 13 (Firefox 13) removed support for -moz-box-shadow. Since then, only the unprefixed version is supported." Found this here in the Notes sections. Does that help explain the behavior you're getting?

Related

Multiple Box shadows doesn't work in MSEdge

Adding Multiple box-shadows works partially. While the shadows appear on both the left and right sides of the box in all the browsers, it doesn't appear on the left side in MSEdge.
I have tried adding border-collapse: seperate, display: block and inline-block, background-color: rgba(255,255,255,1) but none of these seem to work. Any help is appreciated.
{
width: auto;
border: none;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
}
Shadows should appear on the left-side as well in MSEdge.
The issue here is with the pixel density in any testing environment (VirtualBox, browserstack, sauce labs etc.). The shadow is still present everywhere but it just doesn't appear in testing environments. Testing in an actual browser gives the desired output. Not sure about what is causing this but it is an issue with the image on any virtual machine.

Fault with -moz- -webkit- -o- in Chrome and Safari

I am using magento for my eCommerce website and I'm trying to set up a slider panel from this site: https://codyhouse.co/gem/css-slide-in-panel/.
The problem I have on this 2 browsers that the slider goes under certain parts of the site. At the beginning I thought it is z-index problem but it's not,in chrome console it crosses out all of the webkit and moz.It works perfectly fine in Mozilla Would anyone be able to help ?
The reason it will cross out all off prefixed properties is because they are either not required or no longer supported.
It is more than likely in your case that the prefixes are no longer required because they are built in fully into CSS.
As an example, box-shadow required a prefix before becoming a built in element.
Browser - Prefix - Un-prefixed
----------------------------------
Chrome - 1.0 - 10.0
Firefox - 3.5 - 4.0
Safari - 3.0 - 5.1
If you look at the below demo in the Chrome inspector or Firebug, you will see the prefixed versions are commented out because they are no longer required.
div {
width: 200px;
height: 200px;
-webkit-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.75);
}
<div></div>
In terms of your problem, I would guess that the issue is an element stacking issue.
Check z-index of all elements
Make sure the code for this is at the bottom of the screen
Use the chrome element selector to see what elements are overlaying and why

In LESS, is it possible to access the third number of an input variable?

I am reading the first example on LESS page
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
box-shadow: #style #c;
-webkit-box-shadow: #style #c;
-moz-box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
Above code will generate something like
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
For #style variable, what if I want to use box-shadow: 0 0 5px and 0 0 (5+5)px, without having another #style2 as variable input.
Is there anything like a indexAt for #style in LESS? To do something like
#style.at(3)+5
Expected Output:
.test {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
Manually (but must all be the same output)
Using just your current mixin code, you can get your addition this way:
LESS
.test {.box-shadow(0 0 unit(5+5, px), 30%)}
Produces:
CSS Output
.test {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
Automatically with LESS 1.3.2+ (Messy and Difficult)
I've modified the mixin to do some javascript evaluation and get what you want. However, I am not a regular expression expert, nor technically a javascript expert (just know enough to get around), so there may be a more concise way to do what I am doing and also a more general use way of doing it. In my solution here, it requires that you give it a three property #style string and that the last one be given in a px value (so it is not very flexible, but meets your exact specifications fo the question here). Obviously, the LESS 1.4.0 code below is better than this, but until that is out of beta, some (perhaps you) might need something more like the follow:
LESS
.box-shadow(#style, #c) when (iscolor(#c)) {
#firstTwoParams: ~`(function() {
var makeArray = "#{style}".replace(/^\[/,'').replace(/\]$/,'').split(',');
return (makeArray[0]+makeArray[1]);
})()`;
#thirdParam: unit(~`(function() {
var makeArray = "#{style}".replace(/^\[/,'').replace(/\]$/,'').split(',');
return makeArray[2];
})()`, px);
#resetStyle: #firstTwoParams (#thirdParam+5);
box-shadow: #style #c;
-webkit-box-shadow: #resetStyle #c;
-moz-box-shadow: #style #c;
}
CSS Output is the same as the LESS 1.4.0 code answer below.
Automatically with LESS 1.4.0 (Clean and Easy)
Edited based on commented desired output
In the latest version (currently beta, 1.4.0) of LESS, you could use the extract function to access the third member and then automatically have something set up to add to it. Here is an example of a reworked mixin (it would use the exact same call as you currently have):
.box-shadow(#style, #c) when (iscolor(#c)) {
#resetStyle: extract(#style,1) extract(#style,2) (extract(#style,3)+5);
box-shadow: #style #c;
-webkit-box-shadow: #resetStyle #c;
-moz-box-shadow: #style #c;
}
So your .box div code that calls it would produce this:
.box div {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
It has added 5px to your 5px because of the constant set in the #resetStyle variable in the new mixin.
Im sorry, this is a bit rude, maybe, but ScottS - saw your answer to another question and just know/hope that you might have the golden solution for me ... :-) So ScottS ... could I maybe lead you in the direction of my question: CSS / HTML: centering absolute element in browser window regardles of parent position (parent also absolute) ... have an example of the problem here:
http://jsfiddle.net/Nhd8y/4/ ...
#megamenuShops li:hover .dropdown_1column_shop {
left: calc(50% - 400px);
left: -moz-calc(50% - 400px);
left: -webkit-calc(50% - 400px);
position:fixed;
top:inherit;
}
the div that appears on onmouseover stays in viewport (because of fixed position) when scrolling down - it should stay with the parent menu block. But if I do this I can't get the div centered in the browser window horizontally :-/
And last but not least ... many apologies to ttback for using your question to try to get the attention of ScottS ... hope you will forgive me ...

Light shadow on the sides of a container (CSS)

I have been trying to build a site with the right and left sides of the main container having a brown shadow.
So far I achieved my goal but not completely, meaning I get shadow on both sides but it is too dark. I want my shadow to be much lighter (something like Bloomingdales.com website).
Here is my css code, any suggestion?
Thanks!
.container {
overflow: hidden;
background: white;
padding: 15px;
-webkit-box-shadow: 4px 2px #492409, -4px 0 2px #492409;
-moz-box-shadow: 4px 0 2px -6 #492409, -1px 0 2px #492409;
box-shadow: 4px 0 2px #492409, -4px 0 2px #492409;
}
As #Vlad Saling pointed out, css3 supports a variety of box-shadow options.
This Website has some great information concerning how browsers compute shadows. In particular:
You can specify colours in CSS using the alternate rgba([red], [green], [blue], [alpha]) syntax. RGB values are written in decimal (0-255) and the last attribute is “alpha” (i.e. opacity) a decimal number from 0 (transparent) to 1 (opaque). 0.5 alpha gives you something 50% transparent. So rgba(0, 0, 0, 0.25) gives you a nice faded black shadow that stays dark enough to be noticeable over even dark grey.
To solve your problem, either change the color to a lighter shade of brown, or adjust your box shadow attributes to include an alpha channel by declaring its color using rgba rather than hex:
-webkit-box-shadow: 4px 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);
-moz-box-shadow: 4px 0 2px -6 rgba(28, 14, 3, x), -1px 0 2px rgba(28, 14, 3, x);
box-shadow: 4px 0 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);
Should work. Replace x with the degree of alpha transparency (opacity) that you want. For example, .5 for 50% transparency.

CSS drop-shadow inset for IE 8

i've been reading and experimenting with conditional css to display the following css for IE 8.
box-shadow: 0 1px 1px inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
I have been fiddling with gradient and offset but i can not find anything about inset without having to create additional elements.
is is possible to 3 insets and use rgba, as using the gradient start and end for ie was a standard gradient. If not i will happily use basic styling and drop the css3 styling, thanks
Nope, it is not supported; http://dimox.net/cross-browser-css3-box-shadow/... However, take in consideration your analytics data and see how many visitors are really using ie8, maybe it's only a small percentage, and it's not that much of a mis;)

Resources