фоновый градиент svg в safari

[swetlana]

Странность в том, что в safari фоновый svg в некоторых случаях располагается исключительно под текстом, а не на весь объект.

При этом в Хроме такой особенности не замечено.

Более того, особая странность в том, что один и тот же код различно себя ведёт на домашем сервере и на хостинге.

Дома проблемы нет, на хостинге есть. Пример здесь, заголовки в середине контента. В чём дело — не пойму.

собственно, как быть, чтобы фон растягивался на весь элемент?

background-repeat и background-size уже опробованы.

Edited March 13, 2011 by swetlana

[SelenIT]

Под виндой (что XP, что 7) воспроизвести не удалось. Может, экзотический глюк кеша или что-то в таком роде?

[swetlana]

глюк именно воспроизводился?

По ссылке его уже нет. Там сейчас поставлен css-градиент.

Кстати, вот под виндой я и не смотрела, не знаю, был ли он там.

[SelenIT]

Я глюка вообще так и не видел. Вероятно, опоздал к его раздаче, попал на уже пофикшенную версию...

[swetlana]

а вот отдельно воспроизвести его не удалось. Всё страньше и страньше.

Но на сайте по ссылке я вернула глюк, можно любоваться.

[SelenIT]

Смог поймать глюк при изменении масштаба страницы от дефолтных 100%. Текст, похоже, ни при чем, картинка просто смещается (при уменьшении масштаба) и не растягивается в ширину (при увеличении). Интересно, а если убрать 100%-ные размеры с корневого элемента — будет хуже?

[swetlana]

стало лучше.

но интересно, почему?

надо поизучать svg.

Чего бы такого по нему почитать можно хорошего?

До сих пор как-то удавалось обходить стороной, а сейчас, с новыми браузерами, видимо самое правильное будет взять svg на вооружение.

[SelenIT]

На той страничке изменений, увы, не наблюдаю. Посоветовать также ничего не могу — в SVG я, к сожалению, пока вообще абсолютный профан...

А вот на демке с кнопками нашел глюк, сильно похожий на описываемый. Правда, корреляции с текстом тоже не заметно, но факт, что внутренний <rect> со скругленными углами не растягивается на заявленные 100% ширины, а растягивается на какое-то своё значение (разное у разных кнопок).

Еще бредовая мысль возникла (как безумная гипотеза для объяснения межхостинговых различий): с какими mime-типами отдаются svg-файлы в каждом случае?

[swetlana]

интересно веб-инспектор ругается насчёт mime-типов:

Ресурс интерпретирован как изображение, но перемещен с MIME-типом image/svg+xml.

[Great Rash]

надо поизучать svg.

Чего бы такого по нему почитать можно хорошего?

До сих пор как-то удавалось обходить стороной, а сейчас, с новыми браузерами, видимо самое правильное будет взять svg на вооружение.

http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html

https://developer.mozilla.org/en-US/search?q=svg

[rash]

Не надо этого хотеть.

SVG годится для мелких иконок, интерактивной инфографики и подобных вещей. Оформление с помощью SVG - неудобно, бессмысленно и беспощадно. Пробовал. Слишком много оговорок.

[swetlana]

rash, но ведь чтобы составить хотя бы даже такое мнение, нужно изучить, что это такое. Не так ли?

Я просто совсем не в курсе.

[SelenIT]

Оформление с помощью SVG - неудобно, бессмысленно и беспощадно.

Имхо, всё же меньшее зло по сравнению с оформлением с помощью растровых картинок (всеми этими двумерными раздвижными дверями и т.п.). Для всяческих кнопочек, табов, нестандартных полей форм и прочего подобного безобразия. А если SVG-шку завернуть в data-url через urlencode (браузеры, кажись, позволяют), то из нее при нужде можно и цвета-размеры скриптом выковырять и подправить...