Permalink
Browse files

Fix some clipping issues with background images:

1) Removed 1px addition to clip bottom/right in IE8 as it is not needed and was resulting in one extra pixel of the image tiling to be shown
2) Make the bottom/right default clip values extend 1px beyond the box size, to prevent bug where a subpixel of the background was showing through.
  • Loading branch information...
1 parent f2df859 commit a508ef43d0fb8f7107c96993c56578415add5f9e Jason Johnston committed Jul 24, 2010
@@ -148,7 +148,9 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
bgPos = bg.position ? bg.position.coords( el, elW - size.w - bwL - bwR, elH - size.h - bwT - bwB ) : { x:0, y:0 },
repeat = bg.repeat,
pxX, pxY,
- clipT = 0, clipR = elW, clipB = elH, clipL = 0;
+ clipT = 0, clipL = 0,
+ clipR = elW + 1, clipB = elH + 1, //make sure the default clip region is not inside the box (by a subpixel)
+ clipAdjust = PIE.isIE8 ? 0 : 1; //prior to IE8 requires 1 extra pixel in the image clip region
// Positioning - find the pixel offset from the top/left and convert to a ratio
// The position is shifted by half a pixel, to adjust for the half-pixel coordorigin shift which is
@@ -161,11 +163,11 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
if( repeat && repeat !== 'repeat' ) {
if( repeat === 'repeat-x' || repeat === 'no-repeat' ) {
clipT = pxY + 1;
- clipB = pxY + size.h + 1;
+ clipB = pxY + size.h + clipAdjust;
}
if( repeat === 'repeat-y' || repeat === 'no-repeat' ) {
clipL = pxX + 1;
- clipR = pxX + size.w + 1;
+ clipR = pxX + size.w + clipAdjust;
}
shape.style.clip = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)';
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+<title>test Page</title>
+<style>
+.block {
+ -webkit-border-radius:6px;
+ -moz-border-radius:6px;
+ border-radius:6px;
+ behavior: url(../../build/PIE.htc);
+ width:200px;
+ background: #FF9955 url('forum-f3-t25.gif') repeat-x top;
+ position:relative;
+}
+</style>
+</head>
+<body>
+<div id="block-user-1" class="block">
+ <h2 class="title">Title</h2>
+ <div class="content">
+ block content
+ </div>
+</div>
+</body>

0 comments on commit a508ef4

Please sign in to comment.