Skip to content

Instantly share code, notes, and snippets.

@ilyash

ilyash/webkit-background-image-wrapping-bug.html

Created September 1, 2012 10:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ilyash/3568701 to your computer and use it in GitHub Desktop.
Save ilyash/3568701 to your computer and use it in GitHub Desktop.
Download ZIP
Webkit background image wrapping bug
Raw
webkit-background-image-wrapping-bug.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Webkit background image wrapping bug</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<br/>
50x40px div. background-image - 40x1 px, 37 top pixels transparent, 3 bottom pixes are red, green and blue from top to bottom. Followed by 50x40px div with background-color #888:<br/><br/>
<div style="height: 40px; width: 50px; background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/tpB3AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AkBBzkbnSohMwAAABVJREFUCNdjYBiq4D8U/WdgYPj/HwAqngX7pm+hDQAAAABJRU5ErkJggg==); background-repeat: repeat-x"></div>
<div style="background-color: #888; height: 40px; width: 50px;"></div>
<br/><br/>
50x40px div. background-image - 41x1 px, 37 top pixels transparent, 4 bottom pixes are red, green, blue and transparent from top to bottom. Followed by 50x40px div with background-color #888:<br/><br/>
<div style="height: 40px; width: 50px; background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAApCAYAAAD06kPSAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AkBCAc5AtM8lwAAABpJREFUCNdjYBiq4D8U/WdgYPj/n4GBgYEBAEiFBfvr6TBeAAAAAElFTkSuQmCC); background-repeat: repeat-x; overflow: hidden;"></div>
<div style="background-color: #888; height: 40px; width: 50px;"></div>
<br/><br/>
50x40px div. background-image - 42x1 px, 37 top pixels transparent, 5 bottom pixes are red, green, blue, blue and transparent from top to bottom. Followed by 50x40px div with background-color #888:<br/><br/>
<div style="height: 40px; width: 50px; background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAYAAAByfjF8AAAABmJLR0QA7wBbAKGS/7leAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AkBCgAmwx5zywAAABhJREFUCNdjYBiq4D8U/WdgYPj/nwkuDgBmgAX91T9F3wAAAABJRU5ErkJggg==); background-repeat: repeat-x; overflow: hidden;"></div>
<div style="background-color: #888; height: 40px; width: 50px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment