В Фаерфокс конфликт абсолтно спозиционированного элемента и флексбокс? Как исправить?

Question

[senefu]

Заметил, в Фаерфоксе кнопка карточки при ховере слетает в сторону. Как это исправить, что было ровно по ценрту? По пиксельно не катит, т.к. должно быть универсальное решение. anxious-sponge.surge.sh

Comments

[Hyubert]

Зачем в карточках у Вас flex-wrap: column ? там флекбок вобще не нужен (я про внутри карточки). Хотя СТОП, что????? У ФЛЕКС КОНТЕЙНЕРЕ У ВАС ИНЛАЙН-ФЛЕКС В КОТОРИХ ФЛЕКС-КОЛУМН??????????? WTF?????

[Hyubert]

Что делает col-xs-12? И зачем он если у Вас все на флексах?

[Максим]

Hyubert: ОН похоже использовать хотел bootstrap 3 , и так же использует vue и css внутри html т.е стили встроенные и они вроде бы генерируются каким то js - но не вижу каким

[senefu]

Hyubert: какой еще flex-wrap: column, не вижу такого)) Это Flexboxgrid, а не Бутстрап!

[Hyubert]

Максим Ленский: и я не вижу каким, видно только webpack

[Hyubert]

senefu: опечатался, хотел написать flex-direction, но все равно верстк ужасная, очень много не нужной вложености, с css беда, по этому и не работает как нужно

[senefu]

inline-flex вижу только в Flexboxgrid тоже, это не мои стили, это просто сетка.

[Максим]

Hyubert: а почему отсутсвют head ? и очень много всего там лишнего ... вэбпак я понял уже - но руками быстрее и чище получится

[Hyubert]

senefu: а зачем она?

[Hyubert]

Максим Ленский: да вроде не отсутствует, не уверен что руками бистрее, а вот правильно рабочую область не помешает.

[Максим]

Hyubert: я весь сайт скачал и смотрю его в sublime но то что он минифицирован это одно а вот то что теги не закрыты инекоторые это другое , отсуствует закрывающий body и html

[senefu]

Hyubert: зачем сетка? Удобнее, костинстенция. Вы что сеткой не пользуетесь?

[Максим]

Hyubert: я могу тебе скинуть его -- увидишь продакшен своего детища ...

[Hyubert]

Максим Ленский: браузер при рендеринге закроет, это не грубая ошибка за которой все упадет, а вот отображаться страно может. Все же дело не в этом, советую автору переписать проект и зделать это правильно, а то что сейчас есть, никуда не годиться.

[senefu]

С head косяк, щас исправлю, спасибо за замечание)) Это vue-meta косячит.

[senefu]

Hyubert: о чем речь вообще, я ничего не понимаю, с кем вы общаетесь.

[Максим]

senefu: я так и понял что это vue делает

[Андрей]

Hyubert: зделать и годиться - вот это вот никуда не годится (:

[Hyubert]

senefu: зделать сетку на float 20 минут, на флэкс - 5, зачем подключать что-то страное, где будет +100500 лишних строк кода?

[senefu]

Максим Ленский: ну естественно vue, я же не буду теги прописывать вручную на 100 страницах)))

[Hyubert]

Максим Ленский: своего????, я то тут причем?

[Максим]

Hyubert: сорри рамсы попутал --

[senefu]

Максим Ленский: ты мне что-то хотел скидывать? Что? Скидывай. Правда я вообще не понимаю о чем вы, парни, толкуете.

[Hyubert]

senefu: с Максим Ленский

[Hyubert]

senefu: это тестовый проект, или в продакшин пойдет?

[Максим]

senefu: https://cloud.mail.ru/public/Jw3W/YFkUs3fc6 вот лови - смотри что там

[Hyubert]

senefu: Увидел в другом вопросе

это мой первый "настоящий" проект,

теперь все ясно, но лучше Вы начние, с просто верстки, а уже потом идите в VUE, REACT

[senefu]

Максим Ленский: лол, спасибо за какой-то непонятный архив на мейл ру, я пасс))

[senefu]

Hyubert: спасибо за совет! Пойду учить Флексбокс и джЕквери...

[Максим]

senefu: это архив с именем вашего сайта упакованный в zip и всё, я же не могу его в руки передать как книгу вот и передаю людям через облако

[Hyubert]

senefu: ну "джЕквери" я не советовал, лучше vanila JS (ES2015)

[senefu]

Максим Ленский: зачем он мне нужен, простите за глупый вопрос?)) Какая мне от этого польза, что я должен из этого вынести?

Hyubert: без этого никуда. Весь функционал на ванильном JS и сделан. С помощью Вью конечно. Никаких плагинов и прочего))

[senefu]

Максим Ленский: ща еще раз проверил - этот косяк только когда я на сервере рендерю статический сайт. Он работать у меня будет как Node приложение, там нету проблем с тегами))) Но даже с вашими ужасами, я выбиваю 100 из 100 в ПейджСпид - https://developers.google.com/speed/pagespeed/insi...

Я думаю, Гугол знает что делать с тегами, верно?)))

Answer 1

[Андрей]

Это забавно, но на моем мак в фф все окей, а вот в сафари:
https://www.dropbox.com/s/3jf7c9go6dfhwjf/%D0%A1%D...

ff ver. 54.0.1
safari ver. 10.1.1 (12603.2.4)

Comments

[senefu]

Да, аналогичная картина в Убунте в Фаерфоксе. Мда, похоже надо искать другое решение ховера...

[senefu]

И непонятно почему у вас при такой вьюпорте карточки становятся в колонку. Чертова кроссбраузерность!!!

[Андрей]

senefu: добро пожаловать в клуб :D

[senefu]

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

[Максим]

senefu: вообще по разному выглядят в Хроме и в Лисе ! не фига себе ..

[Андрей]

senefu: если карточкам задать flex: 1 они выстроятся в ряд и в сафари.
Кнопкам присвоин позишн абсолют, а координаты по отношению к сторонам не заданы.
Я отказываюсь понимать почему кнопки работают в других браузерах)
Видимо они по умолчанию элементу присваивают координаты которые подошли, но придется делать как положено в любом случае. Эти свойства не такие уж и кроссбраузерные, я бы сказал совсем нет.

[senefu]

Андрей: проблема в том, что если я задам абсолютно спозиционированной кнопке top и left 0, то я потом хрен ее отцентрирую правильно.

[Андрей]

senefu: ну задай что-то типа top: 50% и left: 50% и transform: translate(-50%, -50%). Вот кнопка по умолчанию по центру блока.
Отсюда же можно и плясать с начальными и конечными координатами при :hover

[Максим]

senefu: я вижу вы пользуетесь vue.js , это так ?

[Андрей]

https://codepen.io/m1roku/pen/bRmxLx
примерно вот так выглядит то что я пытался донести в прошлом комментарии)
вроде в моих браузерах все одинаково.

[senefu]

Андрей: если не трудно, проверьте у себя на Маке - wary-veil.surge.sh
Вроде поправил. Заодно flex 1 тоже исправил. Спасибо за помощь!

Максим Ленский: да, Vue!

[Андрей]

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

[senefu]

Андрей: да, я знаю, но пока не придумал как это сделать. Если я задам марджины, то используя flex-wrap карточки перестанут быть идеально по центру))) Т.е. третья крайняя карточка перенесется, а средняя останется с марджинами и будет не центрирована.

[senefu]

Спасибо за помощь! Надеюсь не развалится эта поделка на флексбоксе, ха-ха.

[Андрей]

senefu: в ie11 только не окей что-то с высотой элементов. я помнится где-то краем глаза видел про этот баг. если вспомню - отпишу.

[senefu]

Андрей: вы пользуетесь виртуалками или типо browserstack? После сегодняшнего я понял без этого никуда))

[Андрей]

senefu: у меня и mac и pc есть с десктопами еще мне повезло. но присматриваюсь к browserstack потому что android browser и Samsung browser и safari mobile это конкретные три проблемы)

[senefu]

Проверил в Сафари 7 - вообще все развалилось, анимация пузырьков не работает, второй блок потерял картинку и все сдвинуто, карточки в хлам)))

[senefu]

Впрочем, это 100% мои настройки автопрефикса!)) Флексбокс без префикса.

Answer 2

[chimir]

У вас не заданы "координаты" позиционирования элемента(кнопки)

должно быть что-то вроде:

// для кнопки по умолчанию
left: 50%;
bottom: -50px;
transform: translateX(-50%);

// при наведении
bottom: 50%;
transform: translateX(-50%) translateY(50%);

Comments

[senefu]

Спасибо, примерно так и починил!