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
Related
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.
I'm writing a responsive app, so i want it to work on every browser. I found out that using box-shadow doesn't work on safari, so I used -webkit-box-shadow
I tried to use it this way :
.adresseinput{
height:50px;
background-color: white;
border-radius: 10px;
border: 2px solid white;
box-shadow: 0 0 0 3px red inset;
-webkit-box-shadow: 0 0 0 3px red inset;
outline: none;
}
but it doesn't work at all, any idea why ? And how can I fix this?
Edit : if you want more precision, i'm looking forward to do something like a french city pannel in css (a white input with a red inside border that is not glued to the limit of the input). Sorry if i made an english mistake
If you read the notes and known issues listed here you'll see that 0px pixel blur-radius, blur-radius in general, and inset are problematic in certain versions of Safari.
Safari:
3.1
3.2
6
iOS
3.2
6
I would see if you can isolate the issue by testing against inset and blur-radius individually on your target platform.
Also mentions iOS 8 has a zoom related bug.
I am trying to create similar to this shadow effects, and inspected CSS in chrome, still i am not getting what i want, my current code is:
.imageShadow {
background: #fff;
-webkit-box-shadow: 0 0 5px 0 #bbb;
box-shadow: 0 0 5px 0 #bbb;
height: 293px;
}
Note: My image height is 293px
Is this will work in all browsers?
Anyone have an idea?
If you mean the nice, curvy dropshadow then CSS at the current state does not allow it. They haven't used CSS to do this, they used image sprites.
Here is a chart that shows compatibility for css box-shadow:
http://caniuse.com/css-boxshadow
IE 9+, Firefox 4+, Safari 5+, and Chrome all support the style.
I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".
Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)
Here's the CSS:
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
edit
There also a Webkit only style declaration -webkit-font-smoothing which takes the values
none
subpixel-antialiased
antialiased
where subpixel-antialiased is the default value.
Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.
See here http://maxvoltar.com/archive/-webkit-font-smoothing
The blurred fonts are caused by a weird webkit issue invloving -webkit-backface-visibility. This took me forever to figure out, and I haven't seen it anywhere else on the web yet.
I now add -webkit-backface-visibility: hidden; to the body of my site as a CSS reset style. Watch it sharpen the fonts on your entire site, its amazing. You're transformations are not 3d so this wont affect anything anyway, but if you do decide to do 3d transformations somewhere else on your site just add back -webkit-backface-visibility: visible; to the specific element. Should also fix the flickering too.
After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect.
Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out to fill the surrounding box (making it look a bit awful)
To reproduce the undesirable effect, try something like the following
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: rgb(98,99,100);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}
Apparently this appears to be a Windows-only problem, so for those on a Mac, here's a screenshot: (Check the 'carry on reading' button)
(source: friendlygp.com)
You'll notice that in Safari/Chrome (the latest available public downloads as well as the latest nightlies as far as I can tell), you get a rather ugly background colour bleed. However, in Firefox, you should be able to see what I'm after. If you're in Internet Explorer, woe betide you.
Does anyone know of a technique which will allow me to produce the 'correct' effect? Is there a CSS Property which I've missed that tells webkit to only have the background within the border-radius'd part of the containing box.
I could potentially use an image, but I'm really trying to avoid it. Naturally, as we're dealing with CSS3 and the landscape is continually changing, I might just have to 'lump' it and revert to an image.
However, if anyone can suggest an alternative I would be very much appreciative!
Finally, after an awfully long time, someone much cleverer than I has a solution to this:
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
is your friend :)
From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
This is, unfortunately, a known bug. You can sorta work around it by giving your element a background-coloured border big enough to cover the leaking inset shadow, but it's far from an ideal solution.