Seeing a very strange glitch with a large drop shadow on a site that is in development. Only seems to happen in Chrome. Glitch will disappear and reappear as window is re-sized.
url: https://w3stage.com/pok/order/
img: drop shadow issue
css:
.set-container {
background: #f7f7f7;
border-radius: 7px 7px 0 0;
padding: 30px;
text-align: center;
max-width: 900px;
margin: 0 auto;
width: 90%;
box-shadow: 0 70px 70px rgba(0,0,0,1);
display: flex;
align-items: center;
align-content: center;
}
edit: i am on macOS, Chrome Version 81.0.4044.138 (Official Build) (64-bit)
I managed to get the same result in specific window sizes.
I played around a little bit and what seemed to cancel this issue was removing the border-radius definition from the .set-container class definition.
I am not sure why it worked, but I have seen in my experience that shadows and border-radiuses sometimes have issues. You could consider restructuring that part or just removing the border-radius.
Just as additional info, I was able to reproduce the issue on:
Chrome 83.0.4103.61 (64-bit)
Window size: 936 <= Width < 1200 and 701 < Height < 763.
I am not sure if there's something specific about those dimensions in your case, but that's where I seem to get the extra shadow.
UPDATE
I did test something else that does not have issues (as far as I am aware) with the border-radius.
I switched from box-shadow to filter: drop-shadow. The end result is this line:
filter: drop-shadow(0 70px 70px black);
It looks a little bit different than the box-shadow rule, but does the trick and doesn't have issues with the border-radius.
I am also seeing this aberration in Chrome v86 on a PC and in Chrome v86 on an iPad. I found that I could reliably make the effect half as large (huh?) by eliminating overflow: hidden from the parent div to my image (which has the drop shadow).
Related
I ran into an issue today with Safari (Version 11.0 (12604.1.38.1.7), border-radius, and a large spread drop shadow. This issue doesn't happen in Chrome, FF, or Edge.
The reason for the large drop shadow is to achieve a window like effect where element is visible, and the drop shadow is semi-transparent covering the whole screen.
After some trouble shooting I determined that drop-shadow works fine in Safari, but not when the spread is very large (like here) AND when the border radius of the container all match. Adjust one corner border radius to be one pixel different, and the issue goes away and the drop shadow spread works at the sizes I want.
Here's a quick and dirty CodePen demonstrating the issue.
The button will toggle the equal vs. non-equal border radius class. But feel free to adjust the box-shadow size and note that it works fine up to a certain point (2039px works, 2040px doesn't. This was slightly different from the breaking point I founder earlier in my own code which was ~2019).
I guess I have to paste code from CodePen here too.
HTML
<div class='wrapper'>
<div id='box-shadow-container' class="equal-border-radius">
<div id='box-shadow-fun'>
What's going on here? <br/><br/>
<button id='toggle-radius-class'> Swap Border Radius Class</button>
</div>
</div>
</div>
CSS
body {
display: flex;
flex-direction: column;
min-height: 400px;
}
.wrapper {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
#box-shadow-fun {
padding: 5px;
}
#box-shadow-container {
border: 1px solid #CCC;
box-shadow: 0 0 0 5000px black;
}
.one-different-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 4px;
}
.equal-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
Does anyone know the issue here? I can live with one corner being a pixel radius different, but I don't like not understanding a bug fix as it seems likely to break in the future and I'll still have no idea what's going on.
I don't know what's going on with the unequal border radii, but it seems that Safari doesn't handle very large box shadows well and will refuse to draw it if the spread is too large with a border radius. It does work if you also set a small blur radius (which shouldn't be noticeable except at the very extremes of the shadow):
#box-shadow-container {
box-shadow: 0 0 500px 5000px black;
^^^^^
}
However this will break Firefox. You should detect the Safari browser and only apply this style in Safari.
Play around with the blur radius and spread values to get something that works at the smallest size that you require.
I don't know the cause of the issue but you can fix it without making one of the border radius different by using calc:
.thing-with-box-shadow {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
border-radius: 50%;
// makes the box shadow appear on Safari
border-bottom-right-radius: calc(50% + 0px);
}
JsFiddle example:
http://jsfiddle.net/Q5AjL/
Screenshot from jsfiddle in ie11, dev mode off:
Screen shot from my actual site:
Has anyone seen this before? In ie11 some of the borders have this strange broken affect.
It seems that the semi transparent image is breaking around the rounded corners. How on earth can i fix this? Sigh.. ie.. you are the pain in the side of my web design life.
.small-card{
border-radius: 5px;
display: inline-block;
width: 100%;
max-width: 400px;
margin-bottom: 25px;
}
.trans{
background-image: url(/png/transparent/white/40_percent.png);
background-repeat: repeat;
border: solid 1px #fff;
}
This is ie11. When i turn on devloper mode the issue vanishes! So confusing.
I really don't understand what is going on. And as above, as soon as i turn on developer mode the issue disappears. It only occurs where there is a rounded corner involved.
I have this annoying problem with Chrome (or FF?). I haven't checked on IE yet.
There is one pixel difference in rendering and I have no idea where I can dig for more. I've used all inspectors for the three browsers (FF, Opera, Chrome) to see, if there is anything to tweak, with no success. It is either a bug, or I am blind for this error.
See an example here: www.vanwright.com/catalogue/le-kex-walking-kids/
The problem refers to the left margin of the first images from the left in both rows. Chrome shows 2px border, while other browsers show 1px, which is what I am after.
Is it caused by nth-of-type selector?
Probably not, because here: www.vanwright.com/collections/ it seems to have the same problem (margin-left: -10px shows with a 1px line in Chrome, while there is no space in FF/Opera).
I am lost. Any ideas?
Thanks,
pop
Option 1
To fix and maintain 960px layout:
remove all the :nth-of-type css on .pi-pad
change the css for .pi-pad to read: .pi-pad {margin: 1px 1px 1px 0; width: 318px; padding: 0px;}
Fix background to math 960px layout ( I think it is currently designed for a 979px layout);
Option 2
Expand current layout to match background. (which is clunky, because the background's width is no divisible by 3)
CSS for .container and .span-12 should specify width: 979px
Change either the .pi-pad:nth-of-type(3n+1) or .pi-pad:nth-of-type(3n) CSS to read width: 325px; and remove the other.
Change the .pi-pad CSS to read .pi-pad {margin: 1px 1px 1px 0; width: 324px; padding: 0px;}
=========EDIT=========
I posted this before I saw your replies above, and I also forgot to hide your overflow.
Using option 2, and now that I know for sure it is 980px (it looked like 979 when I measured)
.container and .span-12 should have width: 980px;
Change the .pi-pad CSS to read .pi-pad {overflow: hidden; margin: 1px 1px 1px 0; width: 325px; padding: 0px;}
Use .pi-pad:nth-of-type(3n) OR .pi-pad:nth-of-type(3n+1) should specify width: 326px; and delete the other.
It's a Chrome bug. Thanks to runspired for taking time. Sorry for anyone trying to fix the unfixable.
Background center with chrome (bug)
Rounded corners on my jQuery sliders only work in Firefox.
Renders correctly in Firefox 17.0.1 (see image below)
Not rendering correctly in Safari Version 6.0.2 (8536.26.17) (see image below)
Not rendering correctly in Chrome Version 23.0.1271.101 (see image below)
Here is the jsfiddle build: http://jsfiddle.net/plasticmonument/TCVH5/1/ (note, I only gave full path url's to the slider images, everything else will be missing)
My HTML:
enter code here
My CSS:
.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}
#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}
My guess is that it's the old "foreground images aren't clipped" bug.
In some browsers, a border radius may be applied, but foreground images of the elements with border-radius aren't restrained by the radius.
I was under the impression that this was something that had been dealt with by the major browsers, but it's not something I've looked into for a while, so I may be mistaken in that. It certainly looks like it's what you're seeing. I remember it was quite a big issue back in the days of Firefox 3.x, but if I recall correctly, the FF team sorted it out somewhere between v4 and v8.
To prove it, add an actual border (eg border:solid black 2px;) to the element, and see what happens. If the border disappears under the image at the corners as it follows the radius, then this is the bug you're seeing.
If this is the problem, then the solutions are:
Use a background image instead; this won't be clipped.
Add an additional layer of markup -- eg a <div> with the existing <img> inside it, and put the border radius on the <div> instead of the <img>.
Ignore it, and wait for browser vendors to fix the issue.
on the following page:
http://dreamdeals.rnmtest.co.uk/
the login box on the right displays fine in firefox, ie8, safari, chrome etc but in ie7 & 6 the contents overflow. I have tried everything such as setting a height for the inputs but cant get it right. Anyone got any ideas?
I know this idea seems to at first glance make about as much sense as chopping off your own arms, but:
On #whyjoin input, instead of border: none, try using border: 0.
Here's a reference to the problem you're having:
http://bitesizebugs.wordpress.com/2009/08/17/border-none-not-working-on-text-input-in-internet-explorer/
So, despite border: 0 being the same as border: none, it's better use 0 because it's shorter and to avoid this bug.
I should probably go post that here.
In my IE8 (7 compatibilty mode), it's work fine ; But try to modify your height like this:
#whyjoin {
background-image: url(../images/whyjoinback.jpg);
background-repeat: no-repeat;
padding: 30px 5px 0 5px;
height: 70px; /* BG Image (100px) = 70px + 30px (padding) */
margin-top: -55px;
position: relative;
}
I Suggest you to place the #cardclip in absolute to not poluate the #rightcol.