[Webkit-unassigned] [Bug 138233] New: Button element / svg background sizing and positioning bug

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=138233

            Bug ID: 138233
           Summary: Button element / svg background sizing and positioning
                    bug
    Classification: Unclassified
           Product: WebKit
           Version: 420+
          Hardware: Macintosh Intel
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: scottaohara at yahoo.com

OSX 10.10
safari 8

using a .svg file as a sprite for background images seems to have various positioning / sizing bugs.

When using a SVG sprite as the background for a series of buttons, I had to set the background size and position for each different button.

the attached image shows how the buttons looked in all other modern browsers, but safari 8 seemed to push the entire button element down by 5 - 10px.  When I used a png as a background image, with the same positioning / sizing attributes, the buttons were styled just as they were in other browsers.


Another instance of strange behavior was again using a SVG sprite. But instead of the same bug as presented above, the background-size of the svg did not match other browsers. For instance, I used a background size of 100% auto for a 2 icon stacked sprite.  This time I only tested in firefox, chrome and safari and it looked fine in the FF and chrome. In safari, the image was blown up to a much larger size than the others, so that it was cut off by the height & width I had set for the element.


As a simple example of what I'm referring to in the paragraph above, here is the CSS I was using on these particular sprites:

.ssinfo-icons {
  background: none;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border: none;
  padding: 0;
  position: absolute;
  top: 0;
  width: 24px;
}

#ssninfo_copy {
  background-image: url(img/sprite-copy.svg);
  height: 24px;
  right: 36px;
}

#ssninfo_copy:hover {
  background-position: 0 -24px;
}

#ssninfo_email {
  background-image: url(img/sprite-email.svg);
  height: 19px;
  right: -2px;
}

#ssninfo_email:hover {
  background-position: 0 -20px;
}


---

and here is the markup (these elements are contained within a div set to position relative)

<button type="button" id="ssninfo_copy" class="ssinfo-icons"></button>
<button type="button" id="ssninfo_email" class="ssinfo-icons"></button>

the sprites are available in the zip file i've uploaded as well.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20141030/d4beaf99/attachment-0002.html>