CurvyCorners Displays Red Stripe Top and Bottom in Safari Only
thekenshow - May 15, 2009 - 13:32
| Project: | jQuery Eye Candy |
| Version: | 6.x-1.x-dev |
| Component: | jQuery plugin |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
On Drupal 6.11 with all modules up to date (OK, I'll be updating to 6.12 core later today :-) and the curvycorners 1.81, I'm seeing red stripes - in Safari only – at the top and bottom of a div with curvycorners applied.
The following is set from the jquery eyecandy admin page, and the 'c2' class is applied to the div in the attached image. Using the 'c' class (no antiAlias, autoPad or validTags arguments) produces the same effect only smaller.
$(function(){
$('.c').corner();
$('.inner').corner({
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 }});
$('.c2').corner({
tl: { radius: 16 },
tr: { radius: 16 },
bl: { radius: 16 },
br: { radius: 16 },
antiAlias: true,
autoPad: true,
validTags: ["div"] });
$('.c3').corner({
tl: { radius: 16 },
tr: false,
bl: false,
br: { radius: 16 },
antiAlias: true,
autoPad: true,
validTags: ["div"] });
});Searching for 'safari', 'red', 'stripe' didn't turn up anything. I've disabled the 'c2' class for Safari browsers in template.php but Drupal's page caching causes it still to show up in some cases. Pointers welcome!
| Attachment | Size |
|---|---|
| cc_red_stripes.png | 27.15 KB |
#1
Hello,
I'm still a true javascript dumb and I issued the same problem. Safari AND Opera displayed those same bad red stripe on the top and bottom of my Div. I first tought It was a CSS problem... Lack of space or wrong margin somewhere... But it finally seems that the problem was due to a .png background. I just turned this background into a .jpg and the problem was gone.
Well... more or less cause this div still refuse to have the correct radius corner. Anyway, at least it's not red anymore.
If someone clever find why this happen... Im' pretty interested.
Cheers
++
#2
Hi again,
I just forgot to mention that the problem also happened to me while calling the function with no border or background specification in the CSS (It's stupid I know, why calling a function if you don't use it...?! But anyway, this issue look weird)
++
#3
Hmm - I have a GIF background, and the div is layered over a separate JPEG background, but no PNGs. Turning off the GIF background doesn't help, nor does removing the JPEG from the layer below. The corners, antialiasing and padding seem to be working fine - are you using curvycorners 1.81? I'm going to test the cc 2 early beta and report back.
#4
Hi,
Still some trouble here with the 1.81 Version. Finally Anti-Aliasing worked quite bad (just on the right side of the div... it's really weird...) and the overall looking was not good enough on low dimension screen for my project. I decided to test another script.
Looking forward to see what happens with the version 2.0
++
#5
The latest curvycorners release (1.9) solved my issue, so I didn't bother with the beta. Check it out
http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery
#6
webkit(safari, chrome...) need a background