Bug 138233 – Button element / svg background sizing and positioning bug

• Status: NEW
• Component: CSS

[Scott]

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.

[Scott]

Created attachment 240708 [details]
screen shot of first example in bug. svgs for second example.