Замыливается шрифт

[Celentano]

Добрый день. Подскажите пожалуйста. Есть плашка которая при наведении курсора выезжает. При этом видно как замыливается шрифт и картинка. Проблема только на вебкит браузерах. На мозилле работает корректно.

Заранее спасибо!

 

 

замыливается_шрифт.mp4

[AlexZaw]

Вот если честно ничего не понятно по видео, видно только что размер шрифта меняется, да и то это можно списать на качество видео.

 Тут конечно экстрасенсы сидят, но не видя кода проблемы не решить

[Celentano]

Когда плашка выезжает выглядит вот так. 

[AlexZaw]

Картинка конечно мнооооогое прояснила, теперь то все понятно!

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

 

 

[Celentano]

 

 

Вот код, если нужно что то детальнее пишите. Спасибо огромное!

[AlexZaw]

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

хотите помощи, дайте нормальный код, если эта страница есть в сети - дайте ссылку на нее, чем больше информации в удобном виде вы предоставите, тем больше шансов, что вам помогут.

[swandev]

Может это поможет?

-webkit-font-smoothing: antialiased;

Или может вот это (плашка же с помощью translate выезжает)?

transform: perspective(1px) translateY(-400px);

Или так

transform: translateY(-400px) transform3d(0,0,0);

 

[Celentano]

К сожалению не помогло.

Вот ссылка на страницу. Проблема возникает при наведении курсора на бренд. Отображается плашка с текстом и картинкой (лого). И вот эта картинка на хроме мылится

https://iona.com.ua/ru/brands/

[AlexZaw]

.all_brand li .box .logo_block {

height: 90px;}

[Celentano]

Для ПК версии помогло. Но для мобильной не все по ширине влазят

 

[AlexZaw]

эмм, а причем тут высота и ширина? кстати у меня в мобильной версии во всех браузерах все нормально, проверил на мобиле в хроме, тоже все норм

Edited July 5, 2017 by AlexZaw

[Celentano]

Спасибо, в основном все ок. Но 1 все таки проскакивает. Возможно в картинке дело. Не подскажите?

 

[AlexZaw]

тут дело не в картинке, а в пересчете высоты в ячейке , если поставить высоту 90px  и убрать table-cell, то работает нормально, останется только паддингами выровнять как надо

[Celentano]

transform: translateZ(0px)

 

Добавили это свойство. Для хрома и оперы помогло. А для сафари не работает

[AlexZaw]

попробуйте родителю задать

       -webkit-transform-style: preserve-3d;
       -webkit-perspective: 1000px;

 

[Celentano]

Не помогло

[AlexZaw]

Тогда сделайте как написано выше, а не через transform. Мака у меня нет что бы посмотреть как оно выглядит в сафари, а проверять на древней версии под винду не вижу смысла

[Celentano]

16 hours ago, AlexZaw said:

Тогда сделайте как написано выше, а не через transform. Мака у меня нет что бы посмотреть как оно выглядит в сафари, а проверять на древней версии под винду не вижу смысла

С этим вариантов иногда все равно замыливает. Спасибо за помощь, буду еще искать.

[AlexZaw]

вариант задать высоту и ширину строго в пикселях, размытие происходит в момент пересчета ширины в процентах, если размеры будут жесткими - должно помочь

[Celentano]

3 hours ago, AlexZaw said:

вариант задать высоту и ширину строго в пикселях, размытие происходит в момент пересчета ширины в процентах, если размеры будут жесткими - должно помочь

Сделал как вы написали. Ждем ответа заказчика. Спасибо за помощь

П.С. Не судите строго, я, тестировщик. Верстальщики с которыми мы сотрудничаем (фрилансеры) не смогли это поправить

 

[AlexZaw]

Странные у вас верстальщики, сначала сверстают, потом сами не могут поправить, я конечно сам только учусь, но таких ошибок стараюсь не допускать.

Хотя, я так понимаю, верстка была на опенкарте, или чем-то подобном, а это многое объясняет, научаться в cms по шаблонам работать, а как до ума довести не знают