Check out these safari images:
Antilop – knowsley safari park
maps.google.co.uk/maps?hl=en&q=knowsley+safari+park&a…
Freaky Safari 3.1 CSS -webkit-transform bug
Today I discovered a freaky bug in Safari 3.1 when I combined CSS -webkit-transform and relative positioning. Here is the CSS that causes the issue:
/* =photo */
.photo {
float : left;
height : 75px;
width : 75px;
margin : 0 10px 0 0;
padding : 5px;
background-color : #433b34;
border : 1px solid #827b74;
position : relative;
left : -20px;
margin-right : -10px;
}
/* Webkit / Safari 3.1 CSS Transformations */
.photo { -webkit-transition: all .75s ease-in-out; }
/* Scales an element */
.photo:hover { -webkit-transform : scale(2); }
Removing the negative relative positioning cures the rendering bug, so to get the desired visual effect I replaced it with negative left margin.
You can now download the working examples and workshop slides at For A Beautiful Web.
Safari icon after
A high resolution Safari icon (downloaded from Command-Tab) after applying the Twinsparc Wetfloor Photoshop action.
Originally posted 2010-09-18 02:33:37.
