Chrome неправильно отображает стили rgba() на фоне некоторых элементов (без альфа-смешивания)

Я собираю страницу и действительно борюсь с фоном в браузерах.

На странице используется ряд фонов с альфа-смешением, теней и радиусов границ, и она почти полностью скомпонована с использованием встроенных стилей (по существу, классы CSS используются мало или вообще не используются).

IE9 — мой основной браузер, и в нем страница выглядит великолепно. Однако в Chrome (и мне сказали, что в Firefox) большинство моих фонов с альфа-смешением отображаются либо совсем не (прозрачно), либо сплошными цветами! Я использую стандартный режим с объявлением HTML5 !DOCTYPE, так что это не значит, что я использую особенности IE или что-то в этом роде!

Явно на версиях IE до 9 фоны (и прочее проблематично). Но я не беспокоюсь о поддержке древнего программного обеспечения, и эти пользователи получают опыт просмотра, который они заслуживают.

Обычный рефрен в течение многих лет заключался в том, что «прозрачность в IE отстой!», поэтому мне было комфортно ожидать, что если я заставлю его работать адекватно в IE (как правило, на худшей платформе), тогда другие просто подтянутся, но здесь Я борюсь в обратном направлении! Я использую стандартный "rgba(r,g,b,a);" директива для атрибута background-Color, поэтому я не использую какие-либо радикальные фильтры DirectX или другую магию, тем не менее, в браузерах (НЕ Internet Explorer 9+) я получаю некоторые результаты без альфа-смешивания (иногда это работает , иногда нет).

Сайт можно просмотреть по адресу: https://net-xpert.com/ -- Все выпадающие меню должны иметь полупрозрачный фон, как и парящая панель ссылок в нижней части страницы. Кроме того, если вы перейдете на страницу «Задайте нам вопрос», диалоговое окно должно иметь тонированный фон во всех полях ввода...

О, наконец, я СОВЕРШЕННО НЕНАВИЖУ реализовывать ЛЮБЫЕ b/s, специфичные для браузера/платформы, «экспериментальные» стили-коды! Все в CSS2/3 прекрасно, но я просто ОТКАЗЫВАЮСЬ от использования любых стилей "-browser-some-quirky-CSSAttribute"! (Хотелось бы, чтобы больше разработчиков тоже это сделали! -- тогда производители браузеров оказались бы под большим давлением, чтобы принять эти СТАНДАРТЫ, и наша жизнь стала бы НАМНОГО ЛЕГЧЕ, но я отвлекся...)

В любом случае, любое понимание совместимого со стандартами решения будет высоко оценено (даже если это просто общее признание того, что «да, Chrome и другие в настоящее время не реализуют это правильно ...»), по крайней мере, тогда я буду знать, что нечего делать. покончим с этим...)

Спасибо!


google-chrome html css rgba internet-explorer-9
person NetXpert    schedule 19.12.2012    source источник
comment
rgba отлично работает в Chrome, по крайней мере, с 2010 года, ознакомьтесь с таблицей поддержки браузеров здесь: css-tricks .com/rgba-browser-support   -  person Konrad Dzwinel    schedule 20.12.2012
comment
Вы действительно не должны использовать встроенный стиль. Просто говорю.   -  person Iznogood    schedule 20.12.2012
comment
Если что-то работает в IE и НЕ работает в Chrome и Firefox, это ошибка IE.   -  person Konrad Dzwinel    schedule 20.12.2012
comment
@Kondrad Dzwinel: Вы смотрели на страницу? Потому что, когда я сравниваю бок о бок с Chrome, вы ясно видите проблему... Итак, вы говорите, что если <div style='position:absolute;top:10px;left:10px;width:300px;height:300px;border-radius:5px;box-shadow:5px 5px 5px #000000;border:solid 1px white;color:white;background-Color:rgba(11,6,77,0.70);'>Hello World</div> правильно отображается в IE9, но не имеет альфа-канала в Chrome, это ошибка IE?   -  person NetXpert    schedule 20.12.2012
comment
Так вот что тогда? Два заученных ответа, которые никоим образом не отражают актуальность проблемы, с которой я сталкиваюсь?   -  person NetXpert    schedule 22.12.2012
comment
Кроме того, чтобы ответить на комментарии выше, эта справочная страница (которую я видел заранее) была написана за МЕСЯЦЫ до того, как был выпущен IE9; страница, на которую я ссылался, является ЯСНЫМ ДОКАЗАТЕЛЬСТВОМ того, что rgba() НЕ работает в Chrome. ОТКРОЙТЕ эту страницу в Chrome и IE, и вы УВИДИТЕ, что фоны выпадающего меню имеют Сплошные цвета в Chrome, но в IE правильно смешаны с альфа-каналом. Это также верно в Firefox и Safari. Насколько я могу судить, НИ ОДИН из браузеров, отличных от IE, не может правильно альфа-смешивать эти фоны rgba() (хотя, как ни странно, им удается смешивать некоторые другие элементы фона?)...   -  person NetXpert    schedule 22.12.2012

Ответы (1)


arrow_upward
1
arrow_downward

Что ж, это очень поздний ответ, но, возможно, он все еще будет вам полезен (ваш сайт все еще работает).

У меня есть решение, которое должно работать на вас, предполагая, что вы можете изменить одну из своих таблиц стилей. Что касается ПОЧЕМУ вы столкнулись с этой проблемой ..? Я могу только предполагать, потому что я не знаю, как воссоздать вашу точную конфигурацию.

Исправление;

div[id^=mainMenuOverDiv] {
  background-color: rgba(128,128,128,0.9) !important;
}

Я не сторонник использования !important без необходимости, и вы можете удалить это, используя большую специфичность. Я тестировал это в Firefox, и, похоже, это работает — очевидно, вы захотите заменить фактические значения rgba(x,x,x,x) своими собственными.

Кажется, вы используете какой-то JavaScript (я предполагаю), который рандомизирует идентификатор DIV каждый раз, когда вы наводите курсор на меню, но начало остается неизменным (т.е. один раз это будет #mainMenuOverDivjkhasdfsd89f9f9sdfl3l4l34lfdbvbc, затем в следующий раз это будет #mainMenuOverDivLSDklsdkmlzxncbzmxnc90234xcvassf) . Используя селектор CSS «начинается с» (как показано в примере), вы все равно можете изолировать меню, несмотря на то, что этот потенциальный гаечный ключ находится в разработке.

Интересно (и, вероятно, познавательно), что это даже работает, учитывая, что встроенный CSS обычно нельзя переопределить.

Что касается того, почему это происходит, одна из возможностей заключается в том, что некоторый код, сгенерированный JavaScript, неправильно переносится в браузеры, отличные от IE. В качестве альтернативы, если вы используете его где угодно, минимизация кода также может нарушить некоторые функции (и различаться в разных браузерах) — многие плагины минимизации необходимо настроить для индивидуальных настроек, чтобы гарантировать, что все продолжает работать нормально, поскольку один размер не обязательно подходит для всех. . Например, вы можете обнаружить, что на одном сайте вы можете минимизировать все, кроме JavaScript, в то время как на другом сайте JavaScript подходит, но вы не можете минимизировать встроенный CSS и т. д. Код Google Analytics иногда становится жертвой этого.

Так что, на мой взгляд, проблема, возможно, не связана с IE/Chrome/Firefox или Safari - прозрачность работает нормально во всех из них - я думаю, что это, скорее всего, способ, которым ваш код обрабатывается или доставляется в браузер.

Надеюсь, что это поможет в некотором роде. Дайте мне знать, если вы не можете использовать внешнюю таблицу стилей, и я постараюсь найти альтернативу.

person Hobbes    schedule 13.03.2014